Quiz 1 PWeb

-

Nethaneel Patricio Linggar 

5025201180

PWeb C
Quiz 1 PWeb
Pada kuis pertama kelas Pemograman Web, saya telah membuat form pendaftaran pasien menggunakan HTML, CSS, dan JS.


Source code:
    index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Formulir Pendaftaran Pasien Baru</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="testbox">
      <form action="/">
        <div class="banner">
          <h1>FORMULIR PENDAFTARAN PASIEN BARU <span>RSUD AROSUKA</span></h1>
        </div>
        <div class="announcement">
          <h4>PERHATIAN: HARAP MENGISI FORMULIR INI DENGAN LENGKAP DAN JELAS</h4>
        </div>
        <fieldset>
          <legend>Identitas Pasien</legend>
          <div class="item">
            <label for="name">Nama Pasien<span>*</span></label>
            <input id="name" type="text" name="name" required/>
          </div>
          <div class="item">
            <label for="bplace">Tempat Lahir<span>*</span></label>
            <input id="bplace" type="text" name="bplace" required/>
          </div>
          <div class="item">
            <label for="bdate">Tanggal Lahir<span>*</span></label>
            <input id="bdate" type="date" name="bdate" required/>
            <i class="fas fa-calendar-alt"></i>
          </div>
          <div class="item">
            <p>Jenis Kelamin</p>
            <select>
              <option selected value="" disabled selected></option>
              <option value="p">Pria</option>
              <option value="w">Wanita</option>
              <option value="l">Lainnya</option>
            </select>
          </div>
          <div class="item">
            <label for="address">Alamat<span>*</span></label>
            <textarea id="address" rows="2" required></textarea>
          </div>
          <div class="column">
            <div class="item">
                <label for="rt">RT<span>*</span></label>
                <input id="rt" type="number"   name="rt" required/>
            </div>
            <div class="item">
                <label for="rw">RW<span>*</span></label>
                <input id="rw" type="number"   name="rw" required/>
            </div>
          </div>
          <div class="item">
            <label for="address">Provinsi<span>*</span></label>
            <input id="address" type="text"   name="address" required/>
          </div>
          <div class="item">
            <label for="address">Kecamatan<span>*</span></label>
            <input id="address" type="text"   name="address" required/>
          </div>
          <div class="item">
            <label for="address">Kelurahan/ Desa<span>*</span></label>
            <input id="address" type="text"   name="address" required/>
          </div>
          <div class="item">
            <label for="phone">No. Telp/ HP<span>*</span></label>
            <input id="phone" type="number"   name="phone" required/>
          </div>
          <div class="item">
            <label for="zipcode">Kode Pos<span>*</span></label>
            <input id="zipcode" type="number"   name="zipcode" required/>
          </div>
          <div class="question">
            <label>Agama</label>
            <div class="question-answer">
              <div>
                <input type="radio" value="none" id="radio_1" name="physician"/>
                <label for="radio_1" class="radio"><span>Islam</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_3" name="physician"/>
                <label for="radio_3" class="radio"><span>Kristen Protestan</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_4" name="physician"/>
                <label for="radio_4" class="radio"><span>Kristen Katolik</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_5" name="physician"/>
                <label for="radio_5" class="radio"><span>Hindu</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_6" name="physician"/>
                <label for="radio_6" class="radio"><span>Buddha</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_6" name="physician"/>
                <label for="radio_6" class="radio"><span>Konghucu</span></label>
              </div>
              <div>
                <input  type="radio" value="none" id="radio_6" name="physician"/>
                <label for="radio_6" class="radio"><span>Lainnya</span></label>
              </div>
            </div>
          </div>
          <div class="item">
            <label for="education">Pendidikan Terakhir<span>*</span></label>
            <input id="education" type="text"   name="education" required/>
          </div>
          <div class="item">
            <label for="work">Pekerjaan<span>*</span></label>
            <input id="work" type="text"   name="work" required/>
          </div>  
        </fieldset>
        <br/>
        <fieldset>
          <legend>Penanggung Jawab Pasien</legend>
          <div class="item">
            <label for="prelation">Hubungan dengan Pasien<span>*</span></label>
            <input id="prelation" type="text"   name="prelation" required/>
          </div>
          <div class="item">
            <label for="pname">Nama Penanggung Jawab<span>*</span></label>
            <input id="pname" type="text"   name="pname" required/>
          </div>
          <div class="item">
            <label for="peducation">Pendidikan Penanggung Jawab<span>*</span></label>
            <input id="peducation" type="text"   name="peducation" required/>
          </div>
          <div class="item">
            <label for="pwork">Pekerjaan Penanggung Jawab<span>*</span></label>
            <input id="pwork" type="text"   name="pwork" required/>
          </div>
        </fieldset>
        <div class="btn-block">
          <button onclick="submitFunction()">Submit</button>
          <script src="index.js"></script>
        </div>
        <br>
        <div class="banner1">
            <h3>Rumah Sakit Umum Daerah Arosuka</h3>
            <p>Jl. Raya Solok Padang KM. 20 Arosuka Kode Pos 27364</p>
            <p>Provinsi Sumatera Barat Telp./ Fax (0755) 31160</p>
            <p>Email: raudarosukahatsolo@gmail.com</p>
            <br>
        </div>
      </form>
    </div>
  </body>
</html>

index.js

function submitFunction() {
  alert("Pendaftaran Telah Berhasil");
}

stylesheet.css

html, body {
  min-height: 100%;
  }
  body, div, form, input, select, textarea, label, p {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 22px;
  }
  h1 {
  position: absolute;
  margin: 0;
  font-size: 38px;
  color: #fff;
  z-index: 2;
  line-height: 83px;
  }
  textarea {
  width: calc(100% - 12px);
  padding: 5px;
  }
  .testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 20px;
  }
  form {
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 8px  #669999;
  }
  .announcement {
  position: relative;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  .banner {
  position: relative;
  height: 200px;
  background-image: url("open-hospital-indonesia-scaled.jpg");  
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  .banner1 {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  .banner::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 100%;
  }
  .banner1::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 100%;
  height: 100%;
  }
  input, select, textarea {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  }
  input {
  width: calc(100% - 10px);
  padding: 5px;
  }
  input[type="date"] {
  padding: 4px 5px;
  }
  textarea {
  width: calc(100% - 12px);
  padding: 5px;
  }
  .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
  color:  #669999;
  }
  .item input:hover, .item select:hover, .item textarea:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 3px 0  #669999;
  color: #669999;
  }
  .item {
  position: relative;
  margin: 10px 0;
  }
  .item span {
  color: red;
  }
  input[type="date"]::-webkit-inner-spin-button {
  display: none;
  }
  .item i, input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  font-size: 20px;
  color:  #a3c2c2;
  }
  .item i {
  right: 1%;
  top: 30px;
  z-index: 1;
  }
  [type="date"]::-webkit-calendar-picker-indicator {
  right: 1%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  }
  input[type=radio], input[type=checkbox]  {
  display: none;
  }
  label.radio {
  position: relative;
  display: inline-block;
  margin: 5px 20px 15px 0;
  cursor: pointer;
  }
  .column {
  display:flex;
  justify-content:space-between;
  flex-direction:row;
  flex-wrap:wrap;
  }
  .column div {
  width:48%;
  }
  .question span {
  margin-left: 30px;
  }
  .question-answer label {
  display: block;
  }
  label.radio:before {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #ccc;
  }
  input[type=radio]:checked + label:before, label.radio:hover:before {
  border: 2px solid  #669999;
  }
  label.radio:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px;
  width: 8px;
  height: 4px;
  border: 3px solid  #669999;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  opacity: 0;
  }
  input[type=radio]:checked + label:after {
  opacity: 1;
  }
  .flax {
  display:flex;
  justify-content:space-around;
  }
  .btn-block {
  margin-top: 10px;
  text-align: center;
  }
  button {
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background:  #669999;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  }
  button:hover {
  background:  #a3c2c2;
  }
  @media (min-width: 568px) {
  .name-item, .city-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  }
  .name-item input, .name-item div {
  width: calc(50% - 20px);
  }
  .name-item div input {
  width:97%;}
  .name-item div label {
  display:block;
  padding-bottom:5px;
  }
  }

Comments

Post a Comment

Popular posts from this blog

Tugas 4 PWeb

-
Image
Nethaneel Patricio Linggar   5025201180 PWeb C Tugas 4 PWeb Pada tugas ke-4 kelas Pemograman Web, saya telah membuat website dengan sistem grid menggunakan Bootstrap. Source code:      index.html <! DOCTYPE html > < html lang = "en" > < head >     < title > Template Web Responsive dengan Bootstrap </ title >     < meta charset = "utf-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1" >     < link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css" >     < script src = "bootstrap/js/bootstrap.min.js" ></ script >     < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></ script >     < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></ script > </ head > < body > < nav class = "nav...
Read more

Tugas 8 PWeb

-
Image
Nethaneel Patricio Linggar   5025201180 PWeb C Tugas 8 PWeb Pada tugas ke-8 kelas Pemograman Web, saya telah membuat sistem upload foto dengan PHP. Link Repository Github Landing Page Page mengisi data dan mengupload foto Hasil upload file Page ubah data Hasil ubah data Hasil proses delete
Read more

Tugas 5 PWeb

-
Image
Nethaneel Patricio Linggar   5025201180 PWeb C Tugas 5 PWeb Pada tugas ke-5 kelas Pemograman Web, saya telah membuat website dengan JQuery. Source code:      index.html <! doctype html > < html lang = "en" >   < head >     < meta charset = "utf-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >       < 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" >     < style >         .container {           display : flex ;           flex-direction : column ;           align-items : center ;         }     </ style >     < ...
Read more