Rabu, 06 Mei 2015

Tugas 5 Menampilkan data Mahasiswa  pada file PHP

Posted on 23.23 by  with No comments
Tugas 5 Menampilkan data Mahasiswa  pada file PHP

Tugas 5 Menampilkan data Mahasiswa  pada file PHP 

PHP adalah sebuah kepanjangan dari Hypertext Preprocessor, PHP Atau Hypertext Preprocessor ialah sebuah bahasa pemrograman yang berupa kode atau script yang bisa ditambahkan ke dalam Bahasa Pemrograman HTML , PHP itu sendiri sering kali digunakan untuk hal merancang, membuat dan juga memprogram sebuah website. PHP juga sangat sering digunakan untuk membuat sebuah ataupun beberapa CMS, CMS ialah sebuah software atau perangkat lunak yang mempunyai kegunaan untuk memanipulasi semua atau beberapa isi dari sebuah halaman website. PHP digunakan dan dijalankan di sebuah halaman website untuk mengolah isi data dari website tersebut yang akan dilihat oleh para pengunjung dari website tersebut. PHP dengan HTML diibaratkan sebagai 2 komponen yang saling bekerja sama dan menyatu yang tidak dapat dipisahkan, 

Lalu savelah file sebagai “1.php”.  Simpan file pada alamat “C:\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 C:\xampp\htdocs, baik itu di dalam folder tersebut, atau folder-folder dibawahnya.
Untuk menjalankan di dalam browser,

<?php
    $no1="1";
    $nama1="Muhammad Ridwan";
    $npm1="1410128262081";
    $email1="ridwan_3003@ymail.com";

echo $no1;
echo $nama1;
echo $npm1;
echo $email1;
?>

untuk menampilkan datanya kita akan menggunakan PHP dan sebagai media penghubung kita akan gunakan tag  <a href > seperti berikut :

<html>
<head>
<title>Tugas Alpro 5</title>
</head>
<body>
<h1><center>TUGAS Alpro 5</center></h1>

<table width="622" height="312" border="10" align="center">
  <tr>
    <td width="24" height="48"  align="center"><b>NO</b></td>
    <td width="182" align="center"><b>NAMA</b></td>
    <td width="125" align="center"><b>NPM</b></td>
    <td width="245" align="center"><b>EMAIL</b></td>
  </tr>
  <tr>
    <td height="47" align="center"><a href="1.php">1</td>
    <td align="center"><a href="1.php">Muhammad Ridwan</td>
    <td align="center"><a href="1.php">1410128262081</td>
    <td align="center"><a href="1.php">ridwan_3003@ymail.com</td>
  </tr>
  <tr>
    <td height="47" align="center"><a href="2.php">2</td>
    <td align="center"><a href="2.php">Rama Aditia</td>
    <td align="center"><a href="2.php">1410128262100</td>
    <td align="center"><a href="2.php">rama_aditia@yahoo.com</td>
  </tr>
  <tr>
    <td height="47" align="center"><a href="3.php">3</td>
    <td align="center"><a href="3.php">Muhammad Ali</td>
    <td align="center"><a href="3.php">1410128262099</td>   
    <td align="center"><a href="3.php">ahmadali_2309@gmail.com</td>
  </tr>
  <tr>
    <td height="47" align="center"><a href="4.php">4</td>
    <td align="center"><a href="4.php">Ahmad Hanafi Batu bara</td>
    <td align="center"><a href="4.php">1410128262098</td>   
    <td align="center"><a href="4.php">Ahmad_hanafi@yahoo.com</td>
  </tr>
  <tr>
    <td height="47" align="center"><a href="5.php">5</td>
    <td align="center"><a href="5.php">Hendro Junaidi</td>
    <td align="center"><a href="5.php">1410128262106</td>  
    <td align="center"><a href="5.php">Hendro_J@yahoo.com</td>
  </tr>
</table>
</body>
</html>


 

Tugas 4 Menambahkan biodata pada file HTML 

Posted on 22.54 by  with No comments
Tugas 4 Menambahkan biodata pada file HTML

Tugas 4 Menambahkan biodata pada file HTML 

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:#ffffff;
color:black ;
height:500px;
width:180px;
float:left;
padding:5px;
text-align:left;
}
#nav{
line-height:30px;
background-color:ffffff;
height:500px;
width:220px;
float:right;
padding:5px;
}

Pastikan pada #bio “ float = left ” dan pada #nav “ float = right ”, 

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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="image">
<img src="asd.jpg" height="140px" width="1300px">
</div>
<div id="header">
<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>

<div id="bio">
<ul>
<li><center><b>Biodata</b></center></li>
</ul>
<center><img src="_DSC0125.jpg" height="140px" width="130 px"/></center>
<p>
Nama:Muhammad Ridwan
Pekerjaan:Mahasiswa
Negara:Indonesia
Alamat:Bengkong
Hoby:Futsal</p>
<hr>
<p>Saya adalah seorang mahasiswa informatika di salah satu perguruan tinggi di batam.</p>
</div>

<div id="nav">
<ul>
<li><a href ="Sydney.html">Sydney </li></a></li>
<li><a href ="Moscow.html">Moscow</a></li>
<li><a href ="London.html">London</a></li>
<li><a href ="Abudhabi.html">Abu Dhabi</a></li>

</ul>
</div>
<div id= "section">
<h1>Home...</h1>
<p>
 Banyak kota kota yang indah diluar negri yg bisa kita  kunjungi
</p>
</div>

<div id ="footer">
copyright© Rid 1.com
</div>
</font>
</body>
</html>

Hasilnya,   tabel seperti di bawah ini



Download Tugas 

 

Tugas 3 Menghubungkan file CSS pada luar file HTML

Posted on 22.43 by  with No comments
Tugas 3 Menghubungkan file CSS pada luar file HTML

Tugas 3 Menghubungkan file CSS pada luar file HTML



CSS itu singkatan dari Cascading Style Sheets yang artinya sebuah bahasa pemrograman web untuk mengendalikan komponen sehingga lebih terstruktur. CSS untuk memperbagus website agar terlihat indah dan tersetruktur rapih. Biasanya CSS ini digunakan para desainer desainer web/web development. Tentu saja banyak orang memakai bahasa pemrograman ini, dengan menggunakan HTML + CSS saja website anda sudah terlihat menarik dan elegant.
CSS dapat mengendalikan struktur Body, Warna Tabel, Warna Tulisan, Warna Hyperlink, Warna Mouse over, Membuat header, Spasi antar paragraph, Margin, Padding dll masih banyak lagi yang lain.
Untuk membuat HTML dan CSS anda harus membuat coding untuk menyambungkan HTML dan CSS tersebut. mari kita praktekan!..

<link rel="stylesheet" type="text/css" href="style.css">

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

#image
{
    background-image:url("12.jpg");
    padding-left:100px;
    height:100px;
}
#header {
    background-image:12.jpg;   
    background-color:cyan;
    color:white;
    text-align:center;
    padding-left:150px;
}
#tugas3{
    line-height:80px;
    height:300px;
    width:130px;
    float:left;
    padding:5px;
}
#section {
    text-align:left ;
    width:1000px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    clear:both;
}
ul {
    list-style-type: none;
    margin:0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: cyan;
    color: white;
    background-color: black ;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

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

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 :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<body BGcolor="cyan">
<div id="image">
</div>
<div id="img12">
<ul>
<li><a href="tugas3.html"><font color = "red">Home</a></font></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="contact.html">Contacts</a></li>
<li><a href="about.html">About</a></li>

</ul>
</div>
<div id="tugas3">
<ul>

<li><a href ="Moscow.html"> Moscow</a> </li>
<li><a href ="Abudhabi.html"> Abudhabi</a> </li>
<li><a href ="Sydney.html"> Sydney</a> </li>
<li><a href ="London.html">London</a></li>
</div>
</ul>
</div>
<div id="section">

<img src = "glowing-world-map-wallpaper.png" width="1100px" height="400px">

</div>

<div id="footer">
Copyright &copy; Ridwan
</div>
</body>
</html>

Hasilnya,   tabel seperti di bawah ini
Download Tugas 

Tugas 2 Membuat Tampilan Web Menggunakan CSS

Posted on 22.10 by  with No comments
Tugas 2 Membuat Tampilan Web Menggunakan CSS

Tugas 2 Membuat Tampilan Web Menggunakan CSS



CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan https://www.blogger.com/blogger.g?blogID=1515018944100233287#editor/target=post;postID=6629172223548131193;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=linkuntuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web. 
Berikut contoh tag <div> untuk membuat table :

<div style="background-color:#ff0000">
<h1>this is table with div</h1>
</div>

Hasilnya, browser akan menampilkan seperti berikut :
 



Setelah itu kita akan menggabungkan tag CSS dan HTML seperti pada tag dibawah ini:  
<html>
<head>
<style>

#header{
background-color:#00CC00;
color:black;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#ffffff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:400px;
float:left;
padding:10px;
}
#footer{
background-color:#00CC00;
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<font face="century gothic">
<div id="header">
<h1>City Gallery</hi>
</div>

<div id="nav">
<li><a href ="Moscow.html"><font color = "black">Moscow</a><font></li>
<li><a href ="Abudhabi.html"><font color = "black">Abudhabi</a><font></li>
<li><a href ="Sydney.html"><font color = "black">Sydney</a></font></li>
<li><a href ="tugas2.html"><font color = "red">Home</a></font></li>
</div>

<div id= "section">
<center><img src ="glowing-world-map-wallpaper.png" height=380 width=1220></center>
</div>

<div id ="footer">
Copyright © ridwan.Com
</div>
</font>
</body>
</html> 
Hasilnya seperti gambar dibawah
 

Download Tugas

Tugas 1 Cara Membuat Tabel Dengan HTML

Posted on 21.06 by  with No comments
Tugas 1 Cara Membuat Tabel HTML

Tugas 1 Cara Membuat Tabel Dengan HTML


Cara Membuat Tabel Di HTML . Selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Syarat Dalam membuat tabel di HTML harus memiliki elemen atau kode tertentu akan tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu.

Proses Pembuatan tabel dimulai dari inisialisasi tabel, dengan cara menggunakan elemen atau kode penulisan tabel. Dari penjelasan tersebut diatas maka sampul ilmu kali ini akan menjelasakan tentang Cara Membuat Tabel Di HTML

Elemen-Elemen Tabel

Berikut ini adalah elemen atau kode untuk Cara Membuat Tabel Di HTML

  1. <table>…</table> Kode ini Adalah untuk Membuat Sebuah Tabel atau kode yang digunakan untuk membuat tabel DIHTML.
  2. <td>…</td> Kode ini Adalah untuk Membuat kolom atau kode yang digunakan untuk membuat kolom Dalam Tabel DIHTML.
  3. <tr>…</tr> Kode ini Adalah untuk Membuat Baris atau kode yang digunakan untuk membuat Baris Dalam Tabel DIHTML.
  4. <th>…</th> Kode ini Adalah untuk Membuat Judul/ Keterangan Kolom dan Baris.


Setelah itu mari kita coba buat table dengan nama mahasiswa Mahasiswa STT Ibnu Sina Batam seperti berikut:
<html>
<head><center><font color = "white"><h3><br>Tugas Algoritma 2 Muhammad Riwdan Informatika 2C</br> Tabel Nama Mahasiswa STT IBNU SINA Batam</h3></head>
<body background = "a.jpg">
<table align = "center" border="10" cellspacing="10">
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">N0</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">NPM</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">NAMA</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">JURUSAN</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">01</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">1410128262081</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">Muhammad Ridwan</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">02</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">1410128262082</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">Rama Aditia</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">03</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">1410128262083</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">Muhammad Ali</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">04</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">1410128262084</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">Maymunah</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">05</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">1410128262085</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">Nurlinda</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">06</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">1410128262086</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">Ahmad Hanafi Batu Bara</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">07</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">1410128262087</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">Hendro Junaidi</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">08</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">1410128262088</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">Muhammad Jamil</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">09</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">1410128262089</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">Muhammad Fauzan</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
<tr>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">10</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">1410128262090</td>
<td height ="40" width ="200" align="center" bgcolor="black"><font color ="white" face="century gotic">Muhammad Ramdani</td>
<td height ="40" width ="200" align="center" bgcolor="grey"><font color ="black" face="century gotic">TEKNIK INFORMATIKA</td>
</tr>
</table>
</body>
</html>
Hasilnya,   tabel seperti di bawah ini
;

Download Tugas
Langganan: Postingan (Atom)