Mei 2015 ~ Muhammad Ali

Menampilkan data Mahasiswa STT Ibnu sina pada file PHP

PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS

Sebelum kita membuat file PHP terlebih dahulu kita harus menginstal sebuah web server karena jika tidak ada kita tidak akan bisa menampilkan suatu data pada PHP seperti XAMPP. Saya akan menggunakan notepad++ sebagai editor dan XAMPP sebagai web server.

Pada tugas-tugas sebelumnya kita hanya menggunakan HTML untuk menampilkan suatu data, akan tetapi pada tugas 5 ini kita akan sedikit belajar cara menampilkan data menggunakan PHP.

Berikut adalah cara penulisan pada tag PHP yang akan kita pelajari:

<?php
echo “STT IBNU SINA BATAM”;
?>

Lalu savelah file sebagai “coba.php”. Simpan file pada alamat “D:\xampp\htdocs\”. Buat folder dan simpan file PHP pada alamat tersebut. Sampai tahap ini, sebenarnya kita telah membuat sebuah file PHP sederhana. Untuk menjalankannya, kita harus menggunakan web browser.

Jalankan file PHP tersebut pada web browser. File php yang akan dijalankan harus berada di dalam folder D:\xampp\htdocs, baik itu di dalam folder tersebut, atau folder-folder dibawahnya.

Untuk menjalankan di dalam browser, anda tinggal mengganti alamat D:\xampp\htdocs menjadi localhost. Namun Jika file php tersebut berada di luar folder htdoc, maka web server tidak bisa mengaksesnya.

Setiap file PHP harus ditulis menggunakan akhiran .php (walaupun hal ini bisa dirubah pada settingan modul php).

Penamaan file PHP, harus tanpa spasi dan sebaiknya menggunakan huruf kecil. Anda dapat menggunakan underscore (_) sebagai pengganti spasi.

Hasilnya, browser akan menampilkan seperti berikut ini :

Sama seperti tugas 1 kali ini kita akan membuat tabel akan tetapi untuk menampilkan datanya kita akan menggunakan PHP dan sebagai media penghubung kita akan gunakan tag <a href > seperti berikut :

<html>

<head>

<title>TUGAS Ke-5</title>

</head>

<body>

<h1><center>TUGAS Ke-5</center></h1>

<tr>

<td width="655" align="center"><b>EMAIL</b></td>

</tr>

<tr>

<td align="center"><a href="1.php">Nazrinsyah</td>

<td align="center"><a href="1.php">Nazrinsyah@ibsi.com</td>

</tr>

<tr>

<td align="center"><a href="2.php">Muhammad jamil</td>

<td align="center"><a href="2.php">Muhammad_jamil@ibsi.com</td>

</tr>

<tr>

<td align="center"><a href="3.php">Maymunah</td>

<td align="center"><a href="3.php">Maymunah@ibsi.com</td>

</tr>

<tr>

<td align="center"><a href="4.php">Rama Aditia</td>

<td align="center"><a href="4.php">Rama_Aditia@ibsi.com</td>

</tr>

<tr>

<td align="center"><a href="5.php">Muhammad Ali</td>

<td align="center"><a href="5.php">Muhammad_Ali@ibsi.com</td>

</tr>

</table>

</font>

</body>

</html>

Hasilnya, browser akan menampilkan seperti berikut ini :

Setelah itu kita akan menampilkannya menggunakan PHP seperti pada tag dibawah:

<?php

$no1="1";

$nama1="Nazrinsyah";

$nmp1="1410128262085";

$email1="Nazrinsyah@ibsi.com";

echo $no1;

echo "<br>";

echo $nama1;

echo "<br>";

echo $nmp1;

echo "<br>";

echo $email1;

Simpan file dengan format .php lalu jalankan menggunkan web browser.

Hasilnya, browser akan menampilkan seperti berikut ini :

Demikian terimakasih !!!

Download Disini !!!

Menambahkan biodata pada file HTML

01.24 No comments

Menambahkan biodata pada file HTML

Tak jauh berbeda dengan tugas 3, kali ini di tugas 4 kita akan menambahkan biodata pada sisi kiri web dan akan memindahkan navigasi ke sisi kanan web seperti berikut :

Sebelum menambahkan biodata kita terlebih dahulu harus menambahkan dan merubah beberapa tag pada file CSS seperti berikut:

#bio{

background-color:#20B2AA;

color:white;

height:500px;

width:180px;

float:left;

padding:5px;

text-align:left;

}

.bulat{

border-radius:100em;

opacity:10px;

border:2px solid #ffffff;

width:160px;

height:160px;

}

#nav{

line-height:30px;

background-color:#20B2AA;

height:500px;

width:220px;

float:right;

padding:5px;

}

Pastikan pada #bio “ float = left ” dan pada #nav “ float = right ”, sedangkan .bulat berguna sebagai pengaturan pada gambar agar terlihat bulat.

Setelah itu kita simpan file CSS tersebut dengan nama style.css untuk dihubungkan menggunakan link rel.

Setelah membuat file CSS kita akan membuat file HTML dan akan menghubungkan kedua file tersebut seperti berikut :

<html>

<head>

</head>

<body>

</div>

<ul>

<a href ="home.html">Home</a> | <a href ="news.html">News</a> | <a href ="contact.html">Contact</a> | <a href ="about.html">About</a>

</ul>

</div>

</ul>

<ul>

<li><center><b>Biodata</b></center></li>

</ul>

<p>

Nama:Rama Aditia

Pekerjaan:Mahasiswa

Negara:Indonesia

Alamat:Tanjung Uma

Hoby:-</p>

<hr>

<p>Saya adalah seorang mahasiswa informatika di salah satu perguruan tinggi di batam.</p>

</div>

<p>Indonesia kaya akan keindahan alam yang menakjubkan. Keindahan laut, pegunungan, alam dan budaya yang sangat beraneka ragam.

Banyak tempat wisata yang indah di Indonesia.</p>

<p>Tak perlu jauh-jauh ke luar negeri untuk menghabiskan waktu liburan dan menikmati keindahan alam, cukup keliling Indonesia. Akan ada banyak tempat wisata

yang menakjubkan, yang tidak kalah dengan tempat wisata di luar negeri.

</p>

</div>

<ul>

<li><a href ="RAP.html">Raja Ampat Papua</a></li>

<li><a href ="BALI.html">Pulau Bali</a></li>

<li><a href ="BNK.html">Bunaken</a></li>

<li><a href ="YKG.html">Yogyakarta</a></li>

<li><a href ="LBK.html">Lombok</a></li>

<li><a href ="BRM.html">Bromo</a></li>

<li><a href ="KMD.html">Komodo</a></li>

<li><a href ="TOB.html">Danau Toba</a></li>

<li><a href ="WTB.html">Wakatobi</a></li>

<li><a href ="TRJ.html">Toraja</a></li>

</ul>

</div>

</div>

</font>

</body>

</html>

Hasilnya, browser akan menampilkan seperti berikut ini :

Akan lebih bagus jika kita menambahkan banyak file html pada website tersebut.

Demikian terimakasih !!!

Download Disini !!!

Menghubungkan file CSS pada luar file HTML

01.24 No comments

Menghubungkan file CSS pada luar file HTML

Pada tugas 2 untuk membuat desain web kita menggunakan CSS yang berada pada dalam tag HTML akan tetapi pada tugas 3 ini kita akan menggunakan tag CSS pada luar HTML yang akan dihubungkan menggunakan link rel yang dituliskan pada tag HTML agar saling berhubungan.

Untuk menghubungkan HTML dengan CSS kita akan menggunakan link rel seperti berikut :

Sebelum menghubungkan link rel terlebih dahulu kita harus membuat file CSS sebagai pengatur pada web seperti berikut:

#image{

height:150px;

}

#header{

background-color:#48D1CC;

text-align:center;

color:white;

padding:5px;

}

#nav{

line-height:30px;

background-color:#20B2AA;

height:500px;

width:220px;

float:left;

padding:5px;

}

#section{

width:300px;

float:left;

padding:10px;

color:GREY;

}

#gbr{

width:200px;

float:left;

padding:10px;

color:GREY;

}

#footer{

background-color:#48D1CC;

color:WHITE;

clear:both;

text-align:center;

padding:5px;

}

ul{

list-style-type:none;

margin:0;

padding:5px;

overflow:hidden;

}

a:link, a:visited

{

width:250px;

font-weight:bold;

color:#FFFFFF;

background-color:#98bff21;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active

{

background-color:#87CEFA;

}

Setelah itu kita simpan file CSS tersebut dengan nama style.css untuk dihubungkan menggunakan link rel.

Setelah membuat file CSS kita akan membuat file HTML dan akan menghubungkan kedua file tersebut seperti berikut :

<html>

<head>

</head>

<body>

</div>

<ul>

<a href ="home.html">Home</a> | <a href ="news.html">News</a> | <a href ="contact.html">Contact</a> | <a href ="about.html">About</a>

</ul>

</div>

</ul>

<ul>

<li><a href ="RAP.html">Raja Ampat Papua</a></li>

<li><a href ="BALI.html">Pulau Bali</a></li>

<li><a href ="BNK.html">Bunaken</a></li>

<li><a href ="YKG.html">Yogyakarta</a></li>

<li><a href ="LBK.html">Lombok</a></li>

<li><a href ="BRM.html">Bromo</a></li>

<li><a href ="KMD.html">Komodo</a></li>

<li><a href ="TOB.html">Danau Toba</a></li>

<li><a href ="WTB.html">Wakatobi</a></li>

<li><a href ="TRJ.html">Toraja</a></li>

</ul>

</div>

<p>Children’s Information

We believe it is important to provide added protection for children online. We encourage parents and guardians to spend time online with their children to observe, participate in and/or monitor and guide their online activity.This web does not knowingly collect any personally identifiable information from children under the age of 13. If a parent or guardian believes that has in its database the personally-identifiable information of a child under the age of 13, please contact us immediately (using the contact in the first paragraph) and we will use our best efforts to promptly remove such information from our records.

</p>

</div>

</div>

</font>

</body>

</html>

Hasilnya, browser akan menampilkan seperti berikut ini :

Akan lebih bagus jika kita menambahkan banyak file html pada website tersebut.

Demikian terimakasih !!!

Download Disini !!!

Muhammad Ali

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Mengenai Saya

Arsip Blog

Blog Archive

Sabtu, 23 Mei 2015

Menampilkan data Mahasiswa STT Ibnu sina pada file PHP

Menambahkan biodata pada file HTML

Menghubungkan file CSS pada luar file HTML

Blogger news

Blogroll

About

Social Profiles

Mengenai Saya

Arsip Blog

Blog Archive

Sabtu, 23 Mei 2015

Blogger news

Blogroll

About