Kuis 1 Pemrograman Web C : HTML, CSS, dan JS

 index.html :

1:  <!DOCTYPE html>  
2:  <html lang="en">  
3:  <head>  
4:    <meta charset="UTF-8">  
5:    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
6:    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
7:    <link rel="stylesheet" href="styles.css" />  
8:    <title>Quiz 1 : Formulir Pendaftaran</title>  
9:  </head>  
10:  <body>  
11:    <div class="container">  
12:       <div class="header">  
13:            <h1>PEMERINTAH KABUPATEN SOLOK</h1>  
14:            <h1>RUMAH SAKIT UMUM DAERAH AROSUKA</h1>  
15:            <h3>Jl. Raya Solok Padang KM. 20 Arosuka Kode pos 27364</h3>  
16:            <h3>Propinsi Sumatra Barat Telp / Fax (0755) 31160</h3>  
17:            <h3>Email : raudarosukakabsolok@gmail.com</h3>  
18:       </div>  
19:       <hr>  
20:      <h1>Formulir Pendaftaran Pasien Baru</h1>  
21:      <h2><u>PERHATIAN : HARAP MENGISI FORMULIR INI DENGAN LENGKAP DAN JELAS</u></h2>  
22:       <h3>I.IDENTITAS PASIEN</h3>  
23:      <div class="table">  
24:        <div class="table-row">  
25:          <label class="input-label table-cell" for="nama-pasien">Nama Pasien: </label>  
26:          <input type="text" class="table-cell" id="nama-pasien" />  
27:        </div>  
28:        <div class="table-row">  
29:          <label class="input-label table-cell" for="tempatl">Tempat Lahir: </label>  
30:          <input type="text" class="table-cell" id="tempatl" />  
31:        </div>  
32:        <div class="table-row">  
33:          <label class="input-label table-cell" for="tanggall">Tanggal Lahir: </label>  
34:          <input type="datetime-local" class="table-cell" id="tanggall"/>  
35:        </div>  
36:        <div class="table-row">  
37:          <label class="input-label table-cell" for="jenisk">Jenis Kelamin: </label>  
38:          <input type="text" class="table-cell" id="jenisk" />  
39:        </div>  
40:        <div class="table-row">  
41:          <label class="input-label table-cell" for="alamat">Alamat: </label>  
42:          <input type="text" class="table-cell" id="alamat" />  
43:        </div>  
44:        <div class="table-row">  
45:          <label class="input-label table-cell" for="provinsi">Provinsi: </label>  
46:          <input type="text" class="table-cell" id="provinsi" />  
47:        </div>  
48:        <div class="table-row">  
49:          <label class="input-label table-cell" for="kecamatan">Kecamatan: </label>  
50:          <input type="text" class="table-cell" id="kecamatan" />  
51:        </div>  
52:        <div class="table-row">  
53:          <label class="input-label table-cell" for="keles">Kelurahan/Desa: </label>  
54:          <input type="text" class="table-cell" id="keles" />  
55:        </div>  
56:         <div class="table-row">  
57:          <label class="input-label table-cell" for="notelp">No. Tel/Hp: </label>  
58:          <input type="text" class="table-cell" id="notelp" />  
59:        </div>  
60:         <div class="table-row">  
61:          <label class="input-label table-cell" for="kodepos">Kode Pos: </label>  
62:          <input type="text" class="table-cell" id="kodepos" />  
63:        </div>  
64:        <div class="table-row radio-but">  
65:          <label class="input-label table-cell" for="lomba">Agama: </label>  
66:          <div class="lombaradio" class="table-cell" id="radio">  
67:            <input type="radio" id="radio-1" name="fav_language" value="HTML">  
68:            <label for="radio-1">1. Islam</label><br>  
69:            <input type="radio" id="radio-2" name="fav_language" value="HTML">  
70:            <label for="radio-2">2. Kristen</label><br>   
71:            <div class="flex">  
72:                <input type="radio" id="radio-3" name="fav_language" value="HTML">  
73:                 <label id="radio-3-label" for="radio-3">3. </label><br>  
74:                   <input type="text"/>   
75:              </div>  
76:          </div>   
77:        </div>  
78:         <div class="table-row">  
79:          <label class="input-label table-cell" for="pter">Pendidikan Terakhir: </label>  
80:          <input type="text" class="table-cell" id="pter" />  
81:        </div>  
82:         <div class="table-row">  
83:          <label class="input-label table-cell" for="pekerjaan">Pekerjaan: </label>  
84:          <input type="text" class="table-cell" id="pekerjaan" />  
85:        </div>  
86:      </div>  
87:       <h3>II.PENANGGUNG JAWAB PASIEN</h3>  
88:      <div class="table">  
89:        <div class="table-row">  
90:          <label class="input-label table-cell" for="hub">Hubungan Dengan Pasien: </label>  
91:          <div class="lombaradio" class="table-cell" id="hub">  
92:            <input type="radio" id="radio2-1" name="hubungan" value="HTML">  
93:            <label for="radio-1">Suami</label><br>  
94:            <input type="radio" id="radio2-2" name="hubungan" value="HTML">  
95:            <label for="radio-2">Istri</label><br>  
96:            <input type="radio" id="radio2-3" name="hubungan" value="HTML">  
97:            <label for="radio-3">Ortu</label><br>   
98:            <div class="flex">  
99:                <input type="radio" id="radio2-4" name="hubungan" value="HTML">  
100:                   <input type="text"/>   
101:              </div>  
102:          </div>   
103:        </div>  
104:        <div class="table-row">  
105:          <label class="input-label table-cell" for="penanngung-jawab">Penanggung Jawab: </label>  
106:          <input type="text" class="table-cell" id="penanngung-jawab" />  
107:        </div>  
108:        <div class="table-row">  
109:          <label class="input-label table-cell" for="pendidikanp">Pendidikan P. Jawab: </label>  
110:          <input type="text" class="table-cell" id="pendidikanp" />  
111:        </div>  
112:        <div class="table-row">  
113:          <label class="input-label table-cell" for="pekerjaanp">Pekerjaan P. Jawab: </label>  
114:          <input type="text" class="table-cell" id="pekerjaanp" />  
115:        </div>  
116:       </div>  
117:      <div class="ttd">  
118:        <div class="ttd-pasien">  
119:          <p class="ttd-label">Tanda Tangan</p>  
120:          <input type="file"/>  
121:        </div>  
122:      </div>  
123:      <div class="bottom"></div>  
124:      <div class="button-container">  
125:        <input type="submit" class="button" value="Submit" onclick="success()" />  
126:      </div>  
127:    </div>  
128:    <script src="script.js></script>  
129:  </body>  
130:  </html>


styles.css :

1:  :root {  
2:    --background: rgba(233, 230, 230, 0.5);  
3:    --button-background: rgba(32, 191, 212, 0.5);  
4:    --button-background-hover: rgba(32, 191, 212, 1);  
5:  }  
6:  * {  
7:    margin: 0;  
8:    padding: 0;  
9:    box-sizing: border-box;  
10:    font-family: 'Poppins', sans-serif;  
11:    color: var(--text);  
12:  }  
13:  h1 {  
14:    text-align: center;  
15:    margin-bottom: 30px;  
16:  }  
17:   .ttd-label {  
18:    margin-bottom: 15px;  
19:  }  
20:  h2 {  
21:    font-size: 18px;        
22:    margin-bottom: 15px;  
23:  }  
24:  h3 {  
25:    font-size: 15px;  
26:    margin-bottom: 15px;  
27:  }  
28:  .header {  
29:    text-align: center;  
30:  }  
31:  .header h1, .header h3 {  
32:    margin-bottom: 5px;  
33:  }  
34:  hr {  
35:    margin-top: 15px;  
36:    margin-bottom: 30px;  
37:  }  
38:  .flex {  
39:    display: flex;  
40:    column-gap: 5px;  
41:  margin-bottom: 7px;  
42:  }  
43:  .container {  
44:    max-width: 800px;  
45:    margin: 0 auto;  
46:    padding: 45px;  
47:    background-color: var(--background);  
48:    border: 2px solid black;  
49:    margin-top: 30px;  
50:    margin-bottom: 30px;  
51:  }  
52:  .table-row {  
53:    display: table-row;  
54:    padding: 50px;  
55:    width: 100%;  
56:  }  
57:  .table-row radio-but {  
58:    margin-bottom: 7px;  
59:  }  
60:  .table-cell {  
61:    display: table-cell;  
62:    margin-bottom: 7px;  
63:    padding-right: 18px;  
64:  }  
65:  input[type="text"] {  
66:    min-width: 100%;  
67:  }  
68:  .table {  
69:    margin-bottom: 15px;  
70:    padding-left: 30px;  
71:  }  
72:  .keterangan {  
73:    text-align: left;  
74:  }  
75:  .form-time {  
76:    float: right;  
77:    display: flex;  
78:    gap: 5px;  
79:    margin-top: 60px;  
80:  }  
81:  .ttd {  
82:    text-align: center;;  
83:    clear: left;  
84:  margin-right: -60px;  
85:    margin-top: -170px;  
86:  }  
87:  .ttd-pasien{  
88:    float: right;  
89:  }  
90:  .lombaradio {  
91:    text-align: left;   
92:  }  
93:  .bottom {  
94:    clear: left;  
95:  }  
96:  .button-container {  
97:    text-align: center;  
98:    margin-top: 180px;  
99:  }  
100:  .button {  
101:    padding: 10px 20px;  
102:    background-color: var(--button-background);  
103:    border-radius: 8px;  
104:    border-style: none;  
105:    transition: 0.15s;  
106:  }  
107:  .button:hover {  
108:    background-color: var(--button-background-hover);  
109:    color: white;  
110:    cursor: pointer;  
111:  }


script.js :

1:  function success() {  
2:         alert("Selamat, Anda telah terdaftar!");  
3:  }


Link Repository : https://github.com/brianakbar/Kuis1_PWebC_htmlcssjs

Link Website : https://brianakbar.github.io/Kuis1_PWebC_htmlcssjs/


Screenshot :




Comments

Post a Comment

Popular posts from this blog

Tugas 10 Pemrograman Web C: Latihan Membuat PDF

Image
index.php: 1: <?php include("koneksi.php"); ?> 2: <!DOCTYPE html> 3: <html> 4: <head> 5: <title>List Mahasiswa Institut Teknologi Sumeru</title> 6: <link rel="stylesheet" href="styles.css"> 7: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 8: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> 9: </head> 10: <body> 11: <div class="container"> 12: <header> 13: <h2>INSTITUT TEKNOLOGI SUMERU</h2> 14: <h3>DAFTAR MAHASISWA DEPARTEMEN SISTEM GACHA</h3> 15: </header> 16: <br> 17: <table border="1" style="margin-left:auto;margin-right:auto;"> 18: <thead> 19: <tr> 20: <th>NIM</th> 2
Read more

Tugas 8 Pemrograman Web C: Latihan MySQL

Image
config.php: 1: <?php 2: $server = "sql305.byethost24.com"; 3: $user = "b24_32977667"; 4: $password = "000webhostampas"; 5: $nama_database = "b24_32977667_pendaftaran_siswa"; 6: $db = mysqli_connect($server, $user, $password, $nama_database); 7: if( !$db ){ 8: die("Gagal terhubung dengan database: " . mysqli_connect_error()); 9: } 10: ?> database.sql: 1: CREATE DATABASE `pendaftaran_siswa`; 2: CREATE TABLE `pendaftaran_siswa`.`calon_siswa` ( 3: `id` INT NOT NULL AUTO_INCREMENT , 4: `nama` VARCHAR(64) NOT NULL , 5: `alamat` VARCHAR(255) NOT NULL , 6: `jenis_kelamin` VARCHAR(16) NOT NULL , 7: `agama` VARCHAR(16) NOT NULL , 8: `sekolah_asal` VARCHAR(64) NOT NULL , 9: PRIMARY KEY (`id`) 10: ) ENGINE = InnoDB; 11: INSERT INTO `calon_siswa` (`id`, `nama`, `alamat`, `jenis_kelamin`, `agama`, `sekolah_asal`) VALUES (NULL, 'Lia', 'Jl. Mangga No
Read more

Tugas 6 Pemrograman Web C: Latihan JQuery

Image
Index.html: 1: <!doctype html> 2: <html lang="en"> 3: <head> 4: <!-- Required meta tags --> 5: <meta charset="utf-8"> 6: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7: <!-- Bootstrap CSS --> 8: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> 9: <title>Contoh Program Jquery Sederhana Part 1</title> 10: </head> 11: <body> 12: <br> 13: <br> 14: <br> 15: <!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik--> 16: <center><h1></h1></center> 17: <!-- Buat tombol--> 18: <center><b
Read more