MEMBUAT PROGRAM TABEL MENGGUNAKAN BAHASA PHP

Apa itu PHP - Kepanjangan dari PHP adalah "Hypertext Preprocessor" (ini merupakan singkatan rekursif). Jadi, Apa itu PHP? PHP adalah bahasa scripting web HTML-embedded. Ini berarti kode PHP dapat disisipkan ke dalam HTML halaman Web. Ketika sebuah halaman PHP diakses, kode PHP dibaca atau "diurai" oleh server. Output dari fungsi PHP pada halaman biasanya dikembalikan sebagai kode HTML, yang dapat dibaca oleh browser. Karena kode PHP diubah menjadi HTML sebelum halaman dibuka, pengguna tidak dapat melihat kode PHP pada halaman. Ini membuat halaman PHP cukup aman untuk mengakses database dan informasi aman lainnya.

Apa itu PHP
Banyak sintaks PHP yang hasil adaptasi dari bahasa lain seperti bahasa C, Java dan Perl. Namun, PHP memiliki sejumlah fitur unik dan fungsi tertentu juga. Tujuan dari bahasa pemrograman PHP adalah untuk memungkinkan pengembang web untuk menulis halaman yang dihasilkan secara dinamis dengan cepat dan mudah. PHP juga bagus untuk menciptakan situs Web database-driven.


CONTOH SCRIPT PROGRAM PHP :

<body style="background-image:url(ibnusina.jpg)">

<?php
echo "<marquee behavior><center><h1> STT IBNU SINA BATAM </h1></center></marquee>";
echo "<br>";
echo "<center>JURUSAN INFORMATIKA 2A</center>";
echo "<br>";
echo "<center><table width = 700 border =1 cellpadding =3 cellspacing =8 bgcolor =green></center>
<tr>
<tr bgcolor=gold>
<td>NPM</td>
<td>NAMA MAHASISWA</td>
<td>NO TELPON</td>
</tr>
<tr bgcolor=yellow>
<td>1410128262021</td>
 <td>SAMUEL EVODIUS</td>
 <td>0822674685989</td>
 </tr>
 <tr>
 <tr bgcolor=yellow>
 <td>1410128262027</td>
 <td>LA ODE ASRUN</td>
 <td>0822674685900</td>
 </tr>
 <tr>
 <tr bgcolor=yellow>
 <td>1410128262029</td>
 <td>NUR AINI</td>
 <td>08226746833434</td>
 </tr>
 <tr>
 <tr bgcolor=yellow>
 <td>1410128262031</td>
 <td>RUDI ISMANTO</td>
 <td>082267468593232</td>
 </tr>
 <tr>
 <tr bgcolor=yellow>
 <td>1410128262032</td>
 <td>DESI NOVA SARI</td>
 <td>08226749898989</td>
 </tr>
 <tr>
 <tr bgcolor=yellow>
 <td>1410128262036</td>
 <td>SUSI SUSANTI</td>
 <td>08226222222222</td>
 </tr>
</table>
?>

DAN INI HASILNYA :

MEMBUAT PROGRAM BIODATA DI SIDEBAR DI LAYOUT WEB DENGAN FORMAT CSS DAN HTML

CONTOH SCRIPT CSS:

#image
{
background-image:url("old.jpg");
padding-left:100px;
height:160px;
}
#header{
background-image:url("s9.jpg");
background-color:red;
color:maroon;
text-align:center;
padding:1px;
padding-left:400px;
}
#nav1{

color:gold;
line-height:20px;
height:500px;
width:250px;
float:left;
padding:5px;
}
#nav{
background-image:url("s9.jpg");
line-height:25px;
background-color:RED;
height:500px;
width:150px;
float:right;
padding:10px;
}
#section{
background-color:RED;
height:480px;
color:gold;
width:559px;
float:left;
padding:30px;
}
#footer{
background-image:url("s9.jpg");
color:maroon;
clear:both;
text-align:center;
padding:50px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 125px;
font-weight: bold;
color: gold;
background-color:maroon ;
text-align: center;
padding: 5px;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: black;
}

CONTOH SCRIPT HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bagus.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<marquee><h1> ~THEATRE OF DREAMS~  </h1> </marquee>
<ul>

<li><a href="nav.html">jadwal</a></li>
<li><a href="nav.html">Foto</a></li>
<li><a href="">Squad 2015</a></li>
<li><a href="nav.html">Transfer</a></li>
</ul>
</div>

<div id="nav1">
<ul>
<li><a href ="nav1.html">BIODATA</a></li>
<left><img src=b.jpg height=150 width=200></left>
</p>

<p>
 <p>Nama      :Bagus Tri Harianto</P>
 <P>TTL       :Batam, 21 agustus 1993</p>
 <p>Hobby     :futsal</p>
 <p>Alamat    :Bengkong harapan 1</p>
 <p>Agama  :Islam


 </ul>
 </div>


<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</a></li>

</div>
</ul>

<div id="section">
<center><h1>"MANCHESTER UNITED"</h1></center>
<center><img src=ui.jpg height=190 width=280></center>
<p>
<center>Manchester United Football Club is a professional football club based in Old Trafford, Greater Manchester, England, that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United in 1902 and moved to Old Trafford in 1910.</center>
</p>
<p>
<center>Manchester United have won 20 league titles, the most of any English club,a joint-record 11 FA Cups, four League Cups, and a record 20 FA Community Shields. The club has also won three European Cups, one UEFA Cup Winners' Cup, one UEFA Super Cup, one Intercontinental Cup, and one FIFA Club World Cup. In 1998–99, the club achieved a treble of the Premier League, the FA Cup and the UEFA Champions League.</center>
</p>
</div>
<div id="footer">
<marquee >@BAGUS TRI HARIANTO.COM</marquee>
</div>
</body>
</html>

 DAN INI HASILNYA:

MEMBUAT PROGRAM LAYOUT WEB DENGAN CSS DAN HTML

CSS

fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.


HTML

HTML biasanya menggunakan tag-tag tertentu yang berada dalam tanda kurung <>. Sebagian besar tag pada HTML adalah tag yang berpasangan, contoh : jika kita menggunakan <head> harus ditutup dengan </head>, atau jika kita menggunakan <p> harus ditutup dengan </p>. Tapi ada juga beberapa tag yang tidak berpasangan, contohnya adalah <img>.

Dokumen HTML mirip dengan dokumen tulisan biasa. Akan tetapi, dalam dokumen HTML, sebuah tulisan dapat memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Contohnya, jika ingin membuat tulisan ditampilkan menjadi tebal, seperti TULISAN TEBAL, penulisan dalam dokumen HTML dilakukan dengan cara TULISAN TEBAL. Tanda dipakai untuk mengaktifkan instruksi cetak tebal, kemudian diikuti tulisan yang ingin ditebalkan. Setelah itu, diakhiri dengan tanda untuk menonaktifkan cetak tebal tersebut.


CONTOH SCRIPT HTML:

!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bagus.css">
</head>
<body>
<div id="image">
</div>
<div id="header">

<ul>

<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</a></li>
</ul>
</div>

<div id="section">
<h1>LONDON</h1>
<p>
london is the capital city of england. it is the most populous city in the united kingdom,with a metropolitan are of over 13 million in habitants.
</p>
<p>
standing on the river thames, london has been a major settlement for two millennia,its history going back to its founding by the romans, who named it londinium.
</p>
</div>
<div id="footer">
<marquee >@BAGUS TRI HARIANTO.com</marquee>
</div>
</body>
</html>

CONTOH SCRIPT CSS:

#image

{

background-image:url("London.jpg");

padding-left:100px;

height:187px;

}

#header{

background-color:#7B68EE;

color:red;

text-align:center;

padding:2px;

padding-left:400px;

}

#nav{

line-height:40px;

background-color:#7B68EE;

height:230px;

width:130px;

float:left;

padding:5px;

}

#section{

width:350px;

float:left;

padding:10px;

}

#footer{

background-color:#7B68EE;

color:gold;

clear:both;

text-align:center;

padding:5px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

li {

float: left;

}

a:link, a:visited {

display: block;

width: 125px;

font-weight: bold;

color: gold;

background-color:#9400DE ;

text-align: center;

padding: 5px;

text-decoration: none;

text-transform: uppercase;

}

a:hover, a:active {

background-color: black;

}

HASILNYA:

MEMBUAT PROGRAM LOYOUT WEB DENGAN HTML

Membuat layout atau tampilan web yang kita butuhkan adalah membuat kelas-kelas atau bagian-bagian .dengan menggunakan tag <div> seperti yang sudah kita pelajari pada tutorial sebelum nya. Dan menggunakan syntax css sederhana.Seperti pada umum nya web mempunyai head, body, footer dan sidebar.


Perlu di ingat di asumsikan untuk membuat tampilan web atau layout web kita harus terlebih dahulu memahami tentang kelas html seperti pada tutorial sebelum nya agar memudahkan dalam membuat layout.

CONTOH SCRIP:

<!DOCTYPE html>
<html>

<head>

<style>
#header {
background-color:red;
color:blue;
text-align:center;
padding:10px;
}
#nav{
line-height:80px;
background-color:yellow;
heiht:300px;
width:100spx;
float:left;
padding:20px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:red;
color:blue;
clear:both;
text-align:center;
padding:10px;
}
</style>

</head>


<body>

<div id="header">
<h1><marquee behavior ="alternate" bgcolor="yellow"style="font-family:impact;font-size:35px;"> CITY GALLERY</h1></marquee>
</div>

<div id="nav">
LONDON<br>
PARIS<br>
TOKYO<br>
</div>

<div id="section">
<h1>LONDON</h1>
<p>
london is the capital city of england. it is the most populous city in the united kingdom,with a metropolitan are of over 13 million in habitants.
</p>
<p>
standing on the river thames, london has been a major settlement for two millennia,its history going back to its founding by the romans, who named it londinium.
</p>
</div>

<div id="footer">

<marquee bgcolor="yellow"style="font-family:impact;font-size:20px;color:blue;" tittle="bisa terbaca pesannya">Copyright @BAGUS TRI HARIANTO.com</marquee>
</div>

</body>

</html>





HASILNYA:

MEMBUAT PROGRAM TABEL DARI HTML

Cara Membuat Tabel Dari HTML
Fungsi Tabel dalam HTML ini adalah bertujuan untuk menyajikan data dalam betuk baris dan kolom. Definisi Tabel Untuk di HTML adalah, suatu tempat untuk menampilkan sejumlah data dan informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas berupa kolom dan Baris.

contoh ckrip

<!DOCTYPE html>
<html>
<head>
  <title>Latihan html</title>
</head>

<body>
  <marquee><h1> <CENTER>SELAMAT DATANG</CENTER> </h1></marquee>  
 <CENTER>
 <table border="3">
 <tr> 
 <td> <CENTER>NPM</CENTER> </td> 
 <td> <CENTER>NAMA</CENTER> </td> 
 <td> <CENTER>JURUSAN</CENTER> </td> 
 </tr> 
 <tr> 
 <td>1410128262021</td> 
 <td>SAMUEL EVODIUS</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr> 
 <tr>
 <td>1410128262027</td> 
 <td>LA ODE ASRUN</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262029</td> 
 <td>NUR AINI</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262031</td> 
 <td>RUDI ISMANTO</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262032</td> 
 <td>DESI NOVA SARI</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262036</td> 
 <td>SUSI SUSANTI</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262037</td> 
 <td>AJI BUDIARTO</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262139</td> 
 <td>HAMDANI</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262038</td> 
 <td>RUDI HARTONO</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 <tr>
 <td>1410128262128</td> 
 <td>ALBERTO PRATAMA</td> 
 <td>TEKNIK INFORMATIKA</td> 
 </tr>
 </table>
 </CENTER>
 <p>INI ADALAH TUGAS HTML PERTAMA <br><br></p>
 <p>Di Buat Oleh : BAGUS TRI HARIANTO</p>
</body>
<body>


</html>



HASIL.