Cara menggunakan coding dashboard html

1 years ago

Komentar: 0

Dibaca: 78

Dashboard berisi konten dan menu yang dapat dipilih untuk menuju sebuah halaman tertentu. Menu Berita akan menampilkan daftar berita yang sudah dimasukkan, tombol untuk input berita baru, tombol untuk mengedit atau menghapus berita, dan beberapa fungsi lainnya. Ketika memilih sebuah menu, maka akan diarahkan ke sebuah halaman lain. Namun disini saya membuat halaman dasboard yang bersifat statis bukan dinamis,,ingin tau bedanya web statis dengan web dinamis temen-temen bisa baca di halaman ini .klik ,,silakan dikembangkan sendiri sebagai latihan.

Table of Contents Show

Membuat Login Administrator.
Membuat Box Model Mengunakan Kode Html Dan CSS
Bagaimana cara membuat dashboard?
Apa itu Dashboard dalam sebuah website?

1. Pertama-tama Kita buat CSS nya untuk Dasboard. Seperti di bawah ini scriptnya.

Save scripnya dengan nama style.css

/* style Header */
#header {
 background:yellow;
 height: 80px;
 width: 99%;
 padding: 10px 0px 0px 10px;
}
/* style sidebar */
#sidebar {
 background:gray;
 height: 520px;
 width: 15%;
 padding: 20px;
}
/* style content */
#content {
 height: 500px;
 width: 75%;
 float: right;
 border:dotted gray 1px;
 padding: 20px;
}
/* costum navigasi */
.nav {
 font-family: arial;
}
.a {
 text-decoration: none;
}

2. Kemudian buat file dasboard.html kemudian ketik script berikut dan letakkan pada area konten.

Kemudian Save dengan nama Dasboard.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

3. Selanjutnya buat file Tambah Berita kemudian ketik script berikut.

Kemudian Save dengan nama Tberita.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <div align="center">
   <h3>Tambah Berita</h3>
   
  </div>

  <fieldset>
   <legend>Tambah Berita</legend>
   <table>
    <tr>
     <td>Judul Berita</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></a></td>
    </tr>
    <tr>
     <td>Waktu Kejadian</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></td>
    </tr>
    <tr>
     <td>Banyak korban</td>
     <td>:</td>
     <td><input type="text" name="text" size="30" maxlength="30"/></td>
    </tr>
    <tr>
     <td>Keterangan</td>
     <td>:</td>
     <td><textarea name="alamat" cols="50" required="" style="margin: 0px; height: 187px; width: 414px;"></textarea></td>
    </tr>
    <tr>
     <td>Upload Gambar</td>
     <td>:</td>
     <td><input type="file" name="gambar"></td>
    </tr>
    <tr>
     <td>
      <button type="submit" name="save">Save</button>
      <button type="reset" name="reset">Reset</button>
     </td>
    </tr>
   </table>
  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="thome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="galeri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

4. Kemudian buat file Lihat Berita kemudian ketik script berikut.

Kemudian Save dengan nama Lberita.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <h3><center>Kejadian Seputar bulan Desember Tahun 2015</center></h3>
  <br><br>
  <fieldset>
   <legend>Berita Terhangat</legend>
   <br>
   <form>
   <table  width="900" border="1" align="center">
    <tr bgcolor="#36c2ff">
     <th>Judul Berita</th>
     <th>Waktu Kejadian</th>
     <th>Banyak Korban</th>
     <th>Keterangan</th>
     <th>Foto</th>
    </tr>
    <tr>
     <td>Hujan Badai Dijepang</td>
     <td>12/12/2015</td><td>10 Rumah</td>
     <td>Hujan Badai</td>
     <td><img src="jepang.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Begal Dibegal</td>
     <td>28/12/2015</td>
     <td>1 babak belur</td>
     <td>Begal</td>
     <td><img src="begal.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Meriahnya Tahun Baru</td>
     <td>31/12/2015</td>
     <td>Tidak ada korban</td>
     <td>Tahun Baru</td>
     <td><img src="tahun baru.jpg" width="50px"></td>
    </tr>
    <tr>
     <td>Kapal Marina</td>
     <td>20/12/2015</td>
     <td>20 orang</td>
     <td>Tenggelam</td>
     <td><img src="kapal.jpg"width="50px"></td>
    </tr>
    <tr>
     <td>Hujan</td>
     <td>25/12/2015</td>
     <td>25 Rumah Rusak</td>
     <td>Kebanjiran</td>
     <td><img src="banjir.jpg" width="50px"></td>
    </tr>
    </table>
   </form>

  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

5. Kemudian buat file Tambah Informasi kemudian ketik script berikut.

Kemudian Save dengan nama Tinformasi.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <center><h3><b>Informasi</b></h3></center>
  <fieldset>
   <legend>Tambahkan Informasi</legend>
   <form>
    <table border="0">
     <tr>
      <td><b>Judul Berita</b></td>
      <td><input type="text" name="judul berita"/></td><br/>
     </tr>
     <tr>
      <td><b>Waktu Kejadian</b></td>
      <td><input type="text" name="waktu kejadian"/></td><br/>
     </tr>
     <tr>
      <td><b>Keterangan</b></td><br/>
      <td><textarea name="alamat" cols="30" rows="5"></textarea></td><br/>
     </tr>
    </table>
    <input type="Submit" value="Simpan"> <input type="Reset" value="Batal">
   </form>
  </fieldset>
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

6. Kemudian buat file Lihat Informasi kemudian ketik script berikut.

Kemudian Save dengan nama Linformasi.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>

 <div id="content">
  <h3><center>Berikut Informasi Seputar Bulan Desember Tahun 2015</center></h3>
  <br><br>
  <fieldset>
   <legend>Lihat Informasi</legend>
   <form>
    <table  width="900" border="1" align="center">
     <tr bgcolor="#36c2ff">
      <th>Judul Informasi</th>
      <th>Waktu Kejadian</th>
      <th>Keterangan</th>
     </tr>
     <tr>
      <td>Malam Pergantian Tahun</td>
      <td>31/12/2015</td>
      <td>Tahun Baru 2016</td>
     </tr>
    </tr>
    <tr>
     <td>Libur Tahun Baru</td>
     <td>01/01/2016</td>
     <td>Libur</td>
    </tr>
    <tr>
     <td>Kampus UIT</td><td>23/12/2015</td><td>Aktif</td>
    </tr>
   </table>
  </form>

 </fieldset>
</div>

<div id="sidebar">
 <ol>Berita
  <li><a href="tberita.html">Tambah Berita</a></li>
  <li><a href="lberita.html">Lihat Berita</a></li>
 </ol>
 <hr>
 <ol>Informasi
  <li><a href="tinformasi.html">Tambah Informasi</a></li>
  <li><a href="linformasi.html">Lihat Informasi</a></li>
 </ol><hr>
 <ol>HOME
  <li><a href="thome.html">Tambah Home</a></li>
  <li><a href="lhome.html">Lihat Home</a></li>
 </ol><hr>
 <ol>Download
  <li><a href="tfile.html">Tambah file</a></li>
  <li><a href="lfile.html">Lihat file</a></li>
 </ol><hr>
 <ol>Galeri
  <li><a href="tgaleri.html">Tambah Galeri</a></li>
  <li><a href="lgaleri.html">Lihat Galeri</a></li>
 </ol><hr>
 <ol>Contact
  <li><a href="ktambah.html">Lihat Contact</a></li>
 </ol>
</div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

7. Kemudian buat file Tambah Home kemudian ketik script berikut.

Kemudian Save dengan nama Thome.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <form>
   <center><h3>HOME</h3></center>
   <fieldset>
    <legend>Tambahkan Home</legend>
    <table border="0">
     <tr>
      <td>Nama</td>
      <td>:</td>
      <td><input type="text" name="NAMA"/></td>
     </tr>
     <tr>
      <td>Jenis Kelamin</td>
      <td>:</td>
      <td><input type="text" name="JK"/></td>
     </tr>
     <tr>
      <td>Alamat</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Agama</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Hobi</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
     <tr>
      <td>Status</td>
      <td>:</td>
      <td><input type="text" name="alamat"/></td>
     </tr>
    </table>
    <br>
    Upload Gambar
    <input type="file" name="gambar"/><br/>
    <input type="Submit" value="Save"> <input type="Reset" value="reset ">
   </form>
  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

8. Kemudian buat file Lihat Home kemudian ketik script berikut.

Kemudian Save dengan nama Lhome.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">

  <form>
   <center><h3>HOME</h3></center>
   <fieldset>
    <legend>Home</legend>
    <table border="0" align="center">
     <tbody>
      <h3><center>Selamat Datang di Web sederhana kami ini</center></h3>
      <div align="center">
       <img src="g/profile.jpg" width="200px" height="200px">
      </div>
      <tr>
       <td>Nama</td>
       <td>:</td>
       <td>Putu ariana</td>
      </tr>
      <tr>
       <td>Jenis kelamin</td>
       <td>:</td>
       <td>Laki-laki</td>
      </tr>
      <tr>
       <td>Alamat</td>
       <td>:</td>
       <td>Rapocini Raya</td>
      </tr>
      <tr>
       <td>Agama</td>
       <td>:</td>
       <td>Hindu</td>
      </tr>
      <tr>
       <td>Hobi</td>
       <td>:</td>
       <td>Memancing</td>
      </tr>
      <tr>
       <td>Status</td>
       <td>:</td>
       <td>Lajang</td>
      </tr>
     </tbody>
    </table>
   </fieldset>
  </div>
  <div id="sidebar">
   <ol>Berita
    <li><a href="tberita.html">Tambah Berita</a></li>
    <li><a href="lberita.html">Lihat Berita</a></li>
   </ol>
   <hr>
   <ol>Informasi
    <li><a href="tinformasi.html">Tambah Informasi</a></li>
    <li><a href="linformasi.html">Lihat Informasi</a></li>
   </ol><hr>
   <ol>HOME
    <li><a href="thome.html">Tambah Home</a></li>
    <li><a href="lhome.html">Lihat Home</a></li>
   </ol><hr>
   <ol>Download
    <li><a href="tfile.html">Tambah file</a></li>
    <li><a href="lfile.html">Lihat file</a></li>
   </ol><hr>
   <ol>Galeri
    <li><a href="tgaleri.html">Tambah Galeri</a></li>
    <li><a href="lgaleri.html">Lihat Galeri</a></li>
   </ol><hr>
   <ol>Contact
    <li><a href="ktambah.html">Lihat Contact</a></li>
   </ol>
  </div>
 </body>
 </html>

Berikut penampakannya jika dijalankan melalui browser:

9. Kemudian buat file Tambah File Untuk Download Software atau Aplikasi kemudian ketik script berikut.

Kemudian Save dengan nama Tfile.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <form>
   <center><h3>UPLOAD DATA FILE</h3></center>
   <fieldset>
   <legend>Tambahkan file</legend>
   <table border="0">
    <tr>
     <td>Nama File</td>
     <td>:</td>
     <td><input type="text" name="NAMA"/></td>
    </tr>
    <tr>
     <td>Judul File</td>
     <td>:</td>
     <td><input type="text" name="JK"/></td>
    </tr>
    <tr>
     <td>Extensi</td>
     <td>:</td>
     <td><input type="text" name="alamat"/></td>
    </tr>
   </table>
   <br>
   Upload Data
   <input type="file" name="gambar"/><br/>
   <input type="Submit" value="Save"> <input type="Reset" value="reset ">
  </form>
  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

10. Kemudian buat file Lihat File Untuk Download Software atau Aplikasi kemudian ketik script berikut.

Kemudian Save dengan nama Lfile.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="60px">
 </div>
 <div id="content">
  <center><h3><b>Download Software</b></h3></center>
  <fieldset>
   <legend>Download Sofware</legend>
   <table>

    <tr>
     <td> 1. Web browser</td>
     <tr>
      <td><a href="aplikasi/28.0.1500.71_chrome_installer.exe">Google_chrom</a></td>    
     </tr>
     <tr>
      <td><a href="aplikasi/Firefox Setup 23.0b5.exe">Mozila Firefox</a></td>
     </tr>
     <tr></tr>
     <tr>
      <td>2. Pemrograman Destop</td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Borland Delphi 7.rar">Borland Delphi 7</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Java Netbeans v8.0.2 - 32 Bit.rar">Java Netbeans v8.0.2 - 32 Bit</a></td>
     </tr>
     <tr>
      <td><a href="aplikasi/destop/Visual Studio 6.0 Enterprise Edition - Key 422 111111.zip">Visual Studio 6.0</a></td>
     </tr>
    </tr>
    
   </table>

  </fieldset>
 </div>
 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

Berikut penampakannya jika dijalankan melalui browser:

11. Kemudian buat file Tambah Galeri kemudian ketik script berikut.

Kemudian Save dengan nama Tgaleri.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

0

Berikut penampakannya jika dijalankan melalui browser:

12. Kemudian buat file Lihat Galeri kemudian ketik script berikut.

Kemudian Save dengan nama Lgaleri.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

1

Berikut penampakannya jika dijalankan melalui browser:

13. Kemudian buat file Lihat Contact kemudian ketik script berikut.

Kemudian Save dengan nama Ktambah.html

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

2

Berikut penampakannya jika dijalankan melalui browser:

Sekian untuk tutorial Dasboard nya sekarang beralih ke login administrator.

Pada Artikel sebelumnya saya sudah membahas cara membuat Dasboard dengan HTML. Kali ini saya akan memberikan tips Cara membuat Login Form dengan HTML.

Teknik yang saya gunakan kali ini hanya untuk pemula. Disini saya masih menggunakan teknik cara membuat table. Tapi dengan dimodifikasi sedikit kita bisa merubahnya menjadi sesuatu yang baru.

Coba perhatikan source code dibawah ini :

<!DOCTYPE html>
<html>
<head>
 <title>Dasboard | Administrator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  <img src="img/logo.png" width="80px" height="75px">
 </div>

 <div id="content">
  Selamat datang admin !
 </div>

 <div id="sidebar">
  <ol>Berita
   <li><a href="tberita.html">Tambah Berita</a></li>
   <li><a href="lberita.html">Lihat Berita</a></li>
  </ol>
  <hr>
  <ol>Informasi
   <li><a href="tinformasi.html">Tambah Informasi</a></li>
   <li><a href="linformasi.html">Lihat Informasi</a></li>
  </ol><hr>
  <ol>HOME
   <li><a href="thome.html">Tambah Home</a></li>
   <li><a href="lhome.html">Lihat Home</a></li>
  </ol><hr>
  <ol>Download
   <li><a href="tfile.html">Tambah file</a></li>
   <li><a href="lfile.html">Lihat file</a></li>
  </ol><hr>
  <ol>Galeri
   <li><a href="tgaleri.html">Tambah Galeri</a></li>
   <li><a href="lgaleri.html">Lihat Galeri</a></li>
  </ol><hr>
  <ol>Contact
   <li><a href="ktambah.html">Lihat Contact</a></li>
  </ol>
 </div>
</body>
</html>

3

Penjelasannya ::

Di dalam <table>...</table> kita bisa mengasih attribut tinggi dan lebar juga. kita tinggal mengasih nilai pada attribut tersebut (height & width).
<div align="center>... </div> gunanya untuk membuat text rata tengah.
<strong>...</strong> untuk membuat text menjadi cetak tebal.
Tag <input> untuk menentukan sebuah field input, dimana pengguna bisa memasukan data. Sebuah input dapat bervariasi dalam banyak cara, tergantung type attribut.
attribut text pada input untuk membuat text field.
attribut password untuk membuat text field rahasia.
attribut submit untuk button.

Hasil Tampilannya ::

Tutorial untuk pembuatan login administratornya udah selesai kita beralih ke tutorial box modelnya.

Membuat Box Model Mengunakan Kode Html Dan CSS

Setelah selesai belajar dasar-dasar css beserta stylenya, sekarang kita mulai memasuki materi yang lebih advance lagi. Yang akan kita bahas kali ini adalah box css. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah “model kotak / box” digunakan ketika berbicara tentang design dan tata letak.

Bagaimana cara membuat dashboard?

Untuk membuat Dasbor:.

Login ke Google Analytics..

Buka tampilan Anda..

Buka Laporan..

Klik PENYESUAIAN > Dasbor..

Klik +Dasbor Baru..

Pada dialog Buat Dasbor, pilih Kanvas Kosong (tanpa widget) atau Dasbor Pemula (kumpulan widget default). ... .

Masukkan judul deskriptif untuk Dasbor, kemudian klik Buat Dasbor..

Apa itu Dashboard dalam sebuah website?

Adapun masing-masing fitur dan fungsi menu pada halaman dashboard yaitu. Merupakan halaman depan website yang berisi informasi aktivitas terkini website dan akses cepat pembuatan posting baru. Halaman ini biasanya menampilkan.