Gambar 1.2. Homepage Admin dari web SSOC. Perbedaan yang paling mendasar adalah, didalam homepage visitor halaman
webnya hanya bisa dilihat saja, visitor hanya bisa mengisi Formulir pendaftaran member saja. Berbeda dengan Homepage admin, homepage ini terdapat beberapa
halaman web yang dimana bisa mengedit data dari memberdata dari Visitor. Terdapat perintah fungsi cetak juga yg bisa untuk mengeprint daftar dari member.
Jadi admin bisa leluasa mengelola web seperti pekerjaan admin biasanya.
a. Susunan homepage Frame
Homepage pada web ini tampilannya terbuat dari frame, bagiannya adalah atas, kiri dan kanan, berikut merupakan script frame :
html head
titletitle head
frameset rows=140,, border=0 frameborder=yes border=0 bordercolor=silver frame
name=top scrolling=no noresize target=contens target=main
src=atas2.php frameset cols=300,,300 frameborder=yes border=0 bordercolor=silver
frame name=contens target=main src=kiri1.php scrolling=yes frame name=main target=main src=home.php scrolling=yes
frame name=kanan src=kanan1.php scrolling=yes frameset
frameset html
Script frame tersebut bertujuan untuk menggabungkan part-part dari halaman web, “frameset rows=140,, border=0 frameborder=yes border=0
bordercolor=silver” merupakan perintah untuk membagi halaman web menjadi beberapa bagian secara horizontal, jadi membelah halaman web kesamping, pada
web SSOC ini dibelah menjadi dua bagian yaitu kanan dan kiri.
frameset cols=300,,300 frameborder=yes border=0 bordercolor=silver merupakan perintah untuk membagi halaman web ke atas bawah atau secara
vertical. Pada web SSOC hanya ada satu bagian saja yaitu atas, sisanya adalah page main yaitu halaman web yang mengisi bagian tengah inti dari halaman web.
frame name=contens target=main src=kiri1.php scrolling=yes merupakan perintah untuk memanggil halaman yang akan dijadikan part dari frame. Contoh
script diatas merupakan pemanggilan kiri.php untuk menjadi part dari frame. Terdapa perintah target yaitu melupakan letak dari part tersebut. Jadi jika nantinya terdapat
link yang ingin ditujukan kesana bisa menggunakan target tersebut.
CSS Didalam web ini juga terdapat elemen Css yang digunakan, untuk lebih jelasnya bisa
dilihart pada gambar :
Gambar 1.3. Menu navigasi horizontal dari css. Pada gambar diatas merupakan menu navigasi horizontal yang terbuat dari sript css,
scriptnya seperti di bawah ini :
ul { list-style-type: none;
margin: 0; padding: 0;
overflow: hidden; background-color: DCDCDC;
} li {
float: left; }
li a { display: block;
color: black; text-align: center;
padding: 14px 16px; text-decoration: none;
} li a:hover {
background-color: silver; color: white;
} li {
border-right: 1px solid bbb; }
li:last-child { border-right: none;
} li {
border-right: 1px solid bbb; }
Pada script diatas menunjukkan script yang menseting menu navigasi horizontal pada menu homepage. Pada settingan “ul{ }” yang paling atas adalah untuk
menampilkan blok menu. Didalamnya terdapat setting ukuran background pada menu css, tipe tampilannya beserta warnanya.
Pada script “li { }” pertama merupakan blok dasar, yaitu untuk mensetting tata letak awal dari kotak navigasi, di script tertulis “left”, berarti berawal dari kiri.
Pada “li { }” yang kedua merupakan mensetting blok kedua yaitu blok konten , pada blok ini bisa diisi dengan tulisan yang mempunyai link ke halaman lain.
Pada “li a:hover { } yaitu yang ketiga merupakan perintah untuk mengatur hover. Hover adalah link ketika pengguna mouse di atasnya, Didalamnya terdapat
background color yaitu utuk mengatur warna stand by nya dan color untuk mengatur warna huruf pada hover.
Untuk “li { }” keempat sampai terakhir yaitu untuk mengatur border atau garis pada pertengahan antara sub menu.
Gambar 1.4. Menu navigasi vertical dari css.
Pada gambar diatas merupakan menu navigasi vertical yang terbuat dari sript css, scriptnya seperti di bawah ini :
.menu ul { margin: 0;
padding: 0; width:280px;
list-style-type: none; }
.menu ul li a { text-decoration: none;
color: white; padding: 10.5px 11px;
background-color: DCDCDC; display:block;
} .menu ul li a:visited {
color: black;
} .menu ul li a:hover, .menu ul li .current {
color: white; background-color: C0C0C0;
}
Pada script diatas menunjukkan script yang menseting menu navigasi vertical pada menu homepage. “.menu ul { }” adalah untuk membuat blok menu.
Pada “.menu ul li a { }” yang kedua merupakan script untuk membuat blok beserta blok konten, pada blok ini terdapat setting background dan perintah menampilkan
blok. Pada menu ini juga dapat menyisipkan kata untuk menuju link pada menu.
Pada “.menu ul li a:visited { }”, merupakan link pengguna telah dikunjungi didalamnya dapat diatur warna.
Pada .menu ul li a:hover, .menu ul li .current { } merupakan script gabungan untuk mengatur hover dan ul li yang sudah ada. Didalamnya terdapat script “background-
color” jadi untuk mengatur warna background.
II. Koneksi
