Jumat, 12 Mei 2017

Mendesain Web dengan Tabel. HTML



<!DOCTYPE html>
<html>
<body>
<table border="1" width="100%">
 <tr height="80px">
                <td colspan="2">
                <table border="0" width="100%">
                <tr>
                <td align="left">
                <h1>Welcome to web Beng</h1>
                </td>
                <td align="right">
                  <img src="logo.jpg" height="80px" width="80px" />
                  </td>
</tr>
</table>
</td>
</tr>
                                                <tr height="500px">
                                                <td valign="top">
                                                Selamat Datang di web saya
                                </td>
                                <td width="150px" align="center" valign="top" />
                                <b>MENU</b>
                                <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Foto</a></li>
                                <li><a href="#">Artikel</a></li>
                </ul>
</td>
                </tr>
                <tr height="30px">
                                                <td colspan="2" align="center">bengmaubanu@gmail.com  STMIK AKAKOM 2017</td>
                                </tr>
                </table>
</body>
</html>


HASIL OUTPUT

Contoh Membuat Tabel dengan HTML menggunakan Colspan dan Rowspan



<!DOCTYPE html>
<html>
<head>

</head>
<body>
                <table border="1" width="100%">
                <tr>
                <td colspan="3" align="center"> DAFTRA KULINER DI KEFAMENANU</td>
                </tr>
               
                                <tr>
                                                <th>Jenis Kuliner</th>
                                                <th>Nama Kuliner</th>
                                                <th>Lokasi</th>
                                </tr>
                               
                                <tr>
                                                <td rowspan="3" valign="middle">Hasil Kebun</td>
                                                <td> Ubi Bakar</td>
                                                <td>Jln. Jambu</td>
                                </tr>
                               
                                <tr>
                                                <td>Sei</td>
                                                <td>Jln. Oemenu</td>
                                </tr>
                               
                                <tr>
                                                <td>Jagung Goreng/Bakar</td>
                                                <td>Depan Pasar Lama</td>
                                </tr>
                </table>
</body>
</html>



Contoh Sederhana Mendesain Web Menggunakan CSS



<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap {
                max-width:1000px;
                margin:auto;
                background-color:ligthyellow;
}

#slogan {
                position:absolute;
                width:400px;
                height:170px;
                top:10px;
                left:10px;
                /*background-color:yellow;*/
}
#slogan h1 {
                font-family:gabrielle;
                font-size:55px;
                text-align:right;
                font-weight:bold;
                color:green;
                margin-top:30px;
                margin-bottom:0px;
                padding:0;
                text-shadow:3px 2px 1px grey;
}
#slogan .slogan{
                font-family:tahoma,verdana,arial;
                font-size:14px;
                text-align:right;
                text-decoration:overline;
                color:brown;
                font-weight:bold;
                font-style:italic;
}

#kiri {
                width:200px;
                margin-top:30px;
                min-height:510px;
                position:relative;
                display:block;
                float:left;
}
#menu_vertikal {
                position:absolute;
                width:200px;
                height:300px;
                display:block;
                border:1px solid black;
                background-color:gray;
                color:white;
                line-height:30px;
                text-align:center;
}
#menu_vertikal li{
                list-style-type:none;
                text-align:left;
}
#menu_vertikal li a{
                text-decoration:none;
                width:175px;
                background-color:lightyellow;
                display:block;
                border-top:1px solid black;
                padding:.2em .8em;
}
#menu_vertikal ul{
                padding:0px;
                margin-top:8px;
}
#menu_vertikal li a:hover{
                background-color:lightgray;
                color:black;
}
#banner {
                position:absolute;
                top:305px;
                width:200px;
                height:200px;
                background-color:lime;
                display:block;
                border:1px solid black;
                margin-bottom:200px;
}
#content {
                position:absolute;
                float:left;
                max-width:793px;
                height:505px;
                margin-top:30px;
                margin-left:205px;
                background-color:lightyellow;
                display:block;
                border:1px solid black;
}
@font-face{
                font-family:gabrielles;
                src:url(gabrielle.ttf);
}
</style>
</head>
<body>
<div id="wrap">
                <div id="kiri">
                                <div id="menu_vertikal">
                                .:: Menu ::.
                                <ul>
                                                <li><a href="#"><span>Welcome</span></a></li>
                                                <li><a href="alam.html">Wisata Alam</a></li>
                                                <li><a href="kuliner.html">Wisata Kuliner</a></li>
                                                <li><a href="budaya.html">Wisata Budaya</a></li>
                                                <li><a href="foto.html">Photos</a></li>
                                                <li><a href="about.html">About Us</a></li>
                                                <li><a href="contact.html">Contact Us</a></li>
                                </ul>
                                </div>
                                <div id="banner">
                                                <img src="pict/banner.jpg" width="200px" height="200px"/>
                                </div>
                </div>
                <div id="content">
                                <b><p style="text-align:center"> Foto-foto Tempat Wisata </p></b>
                                <table>
                                <tr>
                                <th><img src="pict/prambanan.jpg" width="180px" height="180px" border="1px" align="center" hspace="10"/><br>Candi Prambanan<br>Sleman</th>
                                <th><img src="pict/paris.jpg" width="180px" height="180px" border="1px" align="center" hspace="10"/><br>Pantai Prangtritis<br>Bantul</th>
                                                </tr>
                                <tr>
                                <th><img src="pict/pindul.jpg" width="180px" height="180px" border="1px" align="center" hspace="10"/><br>Goa Pindul<br>Gunung Kidul</th>
                                <th><img src="pict/alun.jpg" width="180px" height="180px" border="1px" align="center" hspace="10"/><br>Alun-alun Kidul<br>Yogyakarta</th>
                                </tr>
                </table>
                </div>
</div>
</body>
</html>

Hasil Output


 

Pengertian Framework Yii dan pengertian MySQL


 Pengertian Framework Yii
                    Framework Yii adalah framework (kerangka kerja) PHP berbasis komponen untuk pengembangan aplikasi web berskala besar. Framework Yii menyediakan  Reusability  maksimum dalam pemrograman web dan mampu meningkatkan kecepatan dalam membuat aplikasi  web. Nama Yii diambil dari singkatan “Yes It Is”.
                    Aplikasi yang dibangun menggunakan  framework yii membuat beberapa  file pustaka yang disediakan dalam framework yii, dan menggunakan metode pemrograman berorientasi obyek, atau dalam bahasa inggris Objeck Oriened Programming (OOP).
                    Membangun sebuah aplikasi dengan framework Yii, pengembangan cukup kelas yang tersedia di PHP sendiri. Semua yang menggunakan Yii menggunakan arsitektur Model View Controller (MVC). Framework Yii memberlakukan dan mengatur  cara penyimpanan kode program yang diletakan dalam folder  model dalam  folder/ models, sehingga sangat terstruktur dan efisien  dalam penulisan kode program (Badiyanto, 2013).

 My Structured Query Language (MySQL)
                  Database bisa dikatakan sebagai suatu kumpulan dari data yang tersimpan dalam tabel dan diatur atau diorganisasikan sehingga data tersebut bisa  diambil atau dicari dengan mudah dan efisien. Database  MySQL merupakan sebuah database server SQL multiuser dan miltithreaded. MySQL dubuat  oleh TcX dan telah dipercaya mengelola sistem dengan 40 buah database  berisi 10.000 tabel dan 500 di antaranya memiliki 7 juta baris (kira-kira 100 gigabyte data). database ini dibuat untuk keperluan sistem  database yang cepat, handal, dan mudah digunakan. Walaupun memiliki kemampuan  yang cukup baik, MySQL untuk sistem operasi Unix Bersifat Freeware, dan terdapat versi Shareware untuk sistem operasi windows (Badiyanto, 2013).

SUMBER: Badiyanto, 2013, Buku Pintar Framework Yii, Yogyakarta: MediaKom.