Pada Postingan kali ini saya akan berbagai tentang membuat Sistem Informasi Akademik sangat sederhana, sebelumnya kita harus persiapkan sebagai berikut :
- Software host server lokal , karena kita akan bekerja secara offline saya contohkan mengggunakan Xampp bisa didownload di sini
- Editornya saya contohkan menggunakan Notepad++ bisa didownload di sini
- Setelah di install xampp nya, kemudian buatlah folder di tempat xampp yang kita installkan didalam folder htdocs, contoh di c:/xampp/htdocs/SIS/ folder SIS inilah folder kerja kita, semua file yang kita buat kita simpan di folder ini.
- Untuk mengakses file-file yang telah kita buat dengan host server lokal misal http://localhost/SIS/index.html, localhost (host lokal kita) SIS(folder file tersimpan) index.html(file yang dipanggil).
Oke, langsung pada tutorial pertama, pertama kita buat halaman utama dari SIA ini, buatlah halaman css dengan nama file global.css dan simpanlah di folder SIS, untuk source code seperti berikut :
#halaman{/*"id" dilambangkan dengan "#"*/
width: 1348px;
margin:0px auto;/*agar dokumen berada ditengah*/
padding:0px atuo;
background:Black;
}
#judul{
width:100%;
height:100px;
background:#5F9EAO;
margin:0px; /*pengaturan sisi bagian luar*/
padding:0px; /*pengaturan sisi bagian dalam*/
}
#konten{
width:100%;
margin:0px;
padding:0px;
}
.kiri{/*"class" dilambangkan dengan "." titik*/
width:25%;
height:450px;
float:left;
background:#ADD8E6;
}
.tengah{
width:75%;
height:450px;
float:left;
background:#FDF5E6;
}
.footer{
height:40px;
background:#8FBC8F;
clear:both;
}
.judul{
color:brown;
padding:10px 0 0 10px; /*Penulisan untuk semua sisi atas kanan bawah kiri*/
}
.sub-judul{
color:yellow;
padding:0 10px 10px 10px;
}
p{
padding-left:10px;/*penulisan untuk semua sisi saja*/
}
Setelah itu buatlah file index.html dan simpanlah di folder SIS, untuk source code seperti berikut :
<html><head><title>SIA SMA N Bandung</title>
<link href="global.css" rel="stylesheet" type="text/css"></head>
<body>
<div id="halaman">
<div id="judul">
<h1 class="judul">Sistem Informasi Akademik Sederhana</h1>
<h2 class="sub-judul">SMAN Bandung</h2>
</div>
<div id="konten">
<div class="kiri">
<p>Pilihan Menu</p>
</div>
</div>
<div class="tengah">
<p>Selamat Datang di SIA SMAN Bandung</p>
</div>
</div>
</div>
<div class="footer"><center>
<p>Dibuat oleh SMAN Bandung @2011</p></center>
</div>
</div>
</body>
</html>
akseslah host server lokal anda misal http://localhost/SIS/index.html untuk melihat hasil coding kita barusan.
*Gambar bisa diperbesar dengan double klik
lanjut ke Membuat Sistem Informasi Akademik Sangat Sederhana dengan PHP MySql bag.2
Tidak ada komentar:
Posting Komentar