Mergina Larasati

Selasa, 24 Mei 2016

Membuat Design Web

Disini saya akan mengupas script yang ditulis untuk membuat web yang saya design
Pertama tag yang saya gunakan adalah :

1. <html>konten</html> :tag untuk dokumen HTML
2. <title>konten</title> : tag untuk membuat judul
3. <body>konten</body> : untuk membuat tubuh dari sebuah halaman
4. <img src="ini diisi alamat picturenya"> : untuk menambahkan gambar
5. <header>konten</header> :untuk membuat sebuah head
6. <div>konten</div> : untuk membuat sebuah bagian dalam dokumen
7. <nav>konten</nav> : digunakan untuk membuat navigasi link
8. <link rel="stylesheet" type="text/css" href="Mergina_TI/beranda.css"> : format link untuk dibagian head
9. <ul>konten</ul> : tag untuk membuat list dengan tanpa nomor
10. <li>konten</li> : tag untuk membuat deskripsi listnya
11. <a>konten</a> : untuk membuat hyperlink
12. <table>konten< /table> : tag untuk membuat tabel
13. <tr>konten</tr> : tag untuk penanda baris
14. <td>konten</td> : tag untuk penanda kolom
15.<p>konten</p> : berfungsi untuk membuat paragraf baru
16.<br> : berfungsi untuk pindah baris berikutnya
17.<b>konten</b> : untuk membuat huruf tebal
18.<i>konten</i> : untuk membuat huruf miring
19.<u>konten</u> : untuk membuat underline
20.<marquee>konten</marquee> : untuk membuat tulisan/gambar berjalan tergantung dari isi konten

Kedua Property(atribut) yang saya gunakan dalam HTML adalah :

1. class : Digunakan untuk memberikan penamaan elemen yang memiliki karakteristik atau struktur yang dapat digunakan secara berulang-ulang dalam tag HTML.
2. id : Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperbolehkan ada 2 elemen yang memiliki Id yang sama. Salah penggunaan maka akan berdampak pada hasil tampilan web itu sendiri.
3. rowspan : fungsinya untuk menggabungkan cell dalam satu baris
4. colspan : fungsinya untuk menggabungkan cell dalam satu kolom
5. font-size : untuk menentukan ukuran font
6. font-height : untuk membuat huruf tebal
7. font-family : untuk memilih jenis font
8. font-style : untuk membuat jadi font italic(italic) atau tidak
9. color : untuk mengatur warna pada text
10. text-decoration : untuk mendekorasi text
11. text-shadow : untuk membuat bayangan pada text
12. text-align : untuk mengatur posisi text
13. line-height : untuk menentukan tinggi baris antar text
14. text-indent : untuk indent baris pertama (membuat text awal paragraf menjorok kedalam)
15. background-color : untuk menentukan warna latar belakang elemen HTML
16. border : menentukan bingkai disekitar elemen
17. border-width : untuk menentukan ketebalan bingkai
18. border-color : untuk menentukan warna bingkai
19. border-top/right/left/bottom :untuk mengatur jenis style border dibagian atas/kanan/kiri/bawah (pilih salah satu)
20. border-collapse : untuk menentukan apakah sel tabel harus memiliki perbatasan mereka sendiri / berbagi perbatasan
21. height : untuk menentukan tinggi suatu elemen
22. width : untuk menentukan lebar suatu elemen
23. margin : untuk memberikan spasi disisi luar elemen
24. padding : untuk memberikan spasi pada sisi dalam sebuah elemen
25. border-radius: untuk memberikan bentuk sudut tumpul pada bingkai
26. background-repeat: untuk mengulangi gambar yang ditampikan
27. background-size: untuk mengatur lebar dan tinggi gambar
28. box-shadow: untuk membuat bayangan pada box
29. float: berfungsi untuk menempel. Elemen akan menempel pada sebelah kanan/kiri elemen induk

Berikut adalah script untuk membuat navigasi link (dropdown menu) :

Ini adalah script untuk didalam HTML

<nav>
       <ul>
           <li><a href="webhome.html">home</a></li>
           <li><a href="webprofile.html">about me</a></li>
           <li><a href="webgalery.html">galery</a>
           <ul>
               <li><a href="screenshootproject.html">screenshoot project</a></li>
               <li><a href="photo.html">photo</a></li>
           </ul>
           </li>
           <li><a href="webreferensi.html">referensi</a>
           <li><a href="webcontact.html">contact us</a>
       </ul>
    </nav>

Ini adalah script untuk didalam CSS

nav{
    background-color:#900;
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 1012px;
    margin: 0 auto;
}
nav ul{
    list-style: none;
}
nav ul li a{
    float: left;
    width: 200px;
    display: block;
    text-align: center;
    color:white;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 auto;
}
nav ul li a:hover{
    background-color: #666;
    display: block;
}
nav ul li:hover ul{
    display: block;
}
nav ul ul{
    display: none;
    list-style: none;
    position: absolute;
    background-color: lightgray;
    left: 300px;
    top: 50px;
    width: 190px;
}
nav ul ul li a{
    float: none;
    display: block;
    text-align:center;
    width: 160px;
    font-size: 12px;
}
nav ul ul li a:hover{
    color:lightgray;
}

Berikut adalah script untuk membuat teks berjalan dan gambar berjalan:

untuk tulisan => <marquee>tuliskan teksnya</marquee>

untuk gambar :

Berikut adalah script untuk memasukkan gambar untuk dijadikan backgound-image:

background-image: url("sakura.jpg"); sakura.jpg bisa diganti dengan nama photo anda

background-size: 50%(untuk lebar) 100%(untuk tinggi);

Berikut adalah script untuk membuat gradasi warna pada backgound:

Ini adalah script untuk didalam HTML

<body>

</div>

</body>

Ini adalah script untuk didalam CSS

#isi2b{
    background:-webkit-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
    background:-moz-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
    width:1012px;
    margin:0 auto;
    height:1500px;
    line-height:20px;
    border-radius:10px 10px 0px 0px;
    border-bottom:5px solid silver;
    box-shadow:6px 10px 10px grey;
    border-bottom: 7px dotted indigo;
    border-left: 7px dotted indigo;
    border-right: 7px dotted indigo;
}

-webkit : gunanya agar bisa terlihat di google chrome

-moz :gunanya agar bisa terlihat di mozila

dotted untuk membuat titik pada bingkai (border)

Berikut adalah script untuk memasukkan gambar untuk dijadikan galery:

Ini adalah script untuk didalam HTML

<body>

</body>

Ini adalah script untuk didalam CSS

#gambar{
    float: left;
    -moz-border-radius:50px;
    -webkit-border-radius:10px;
    margin: 45px 5px 5px 45px;
    padding: 3px;
    border:solid;
    background-color:hotpink;
    cursor: pointer;
}
#gambar:hover{
    float: bottom;
    -moz-border-radius:50px;
    -webkit-border-radius:10px;
    margin: 0px 15px 15px 0px;
    padding: 10px;
    border:solid;
    background-color:lightgray;
}

untuk lebih jelasnya bisa langsung kunjungi alamat web berikut :

http://merginalarasati.net23.net

Berikut adalah print outnya

Rabu, 27 April 2016

Program Ascending dan Descending menggunakan PHP

Sorting data atau yang sering disebut dengan pengurutan data merupakan suatu kegiatan yang dilakukan untuk mengurutkan data pada sebuah variabel tertentu.

Sort Ascending
Sort Ascending adalah teknik mengurutkan data dari yang terkecil sampai dengan yang terbesar, contoh : 0,1,2,3,.. (jika dengan huruf dari a – z)
Sort Descending
Sort Descending adalah teknik mengurutkan data dari yang terbesar sampai dengan yang terkecil, contoh : n,..,5,4,3,2,1,0(jika dengan huruf dari z-a)

Script untuk formnya :

<html>
<head>
<title>form</title>
</head>
<body>
<form method="post"action="terima.php">
<table>
<tr>
<td>Inisialisasi</td>
<td>:</td>
<td><input type="text"name="inisialisasi"></td>
</tr>
<tr>
<td> Batas </td>
<td>:</td>
<td><input type="text"name="batas"></td>
</tr>
<tr>
<td>Jenis</td>
<td>:</td>
<td><select name="jenis">
<option value="">--pilih--</option>
<option value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td>
<input type="submit" value="kirim"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Script untuk menentuka rumus perulangan Ascending dan Descending :

<?php

$a=$_POST['inisialisasi'];
$b=$_POST['batas'];
$c=$_POST['jenis'];

if($b>$a && $c=="Ascending"){
for ($i=$a; $i<=$b; $i++){
echo "$i<br>";
}
}
elseif($b>$a && $c=="Descending"){
for ($i=$b; $a<=$i; $i--){
echo "$i<br>";
}
}

elseif($b<$a){
echo "Nilai batas harus lebih besar dari nilai inisialisasi<br>Silahkan input ulang ^_^";
}

?>

print outputnya :

Sabtu, 16 April 2016

Perbedaan dari Echo, Print, Printf Dalam PHP dan Format yang Dapat Digunakan Untuk PHP dalam Fungsi Date

Echo, print dan printf kurang lebih berfungsi sama yaiu digunakan untuk output data ke layar. Berikut penjelasannya :

1. Echo
Echo berfungsi untuk menampilakan satu output data atau lebih yang dipisahkan dengan tanda koma(,) atau berfungsi untuk menampilkan string terformat.
Echo dapat digunakan dengan atau tanpa tanda kurung. echo atau echo().
Contoh berikut menunjukkan bagaimana output teks dengan perintah echo.

Contoh String :

                  <?php
       echo "<h2>Belajar</h2>";
       echo " Mari belajar PHP<br>";
       echo " welcome ! <br>";
       ?>

Contoh Variabel :

<?php

$txt1 = "Belajar PHP";

$txt2 = "latihan PHP";

$x = 7;

$y = 9;

echo "<h2>$txt1</h2>";

echo "Belajar dan $txt2<br>";

echo "$x kurang dari $y";

?>

2. Print
Print adalah konstruksi bahasa dalam php untuk menampilkan string yang berfungsi hampir sama dengan echo tetapi print hanya dapat menampilkan 1 data.
Print dapat digunakan dengan atau tana tanda kurung. Print atau print().
Contoh berikut menunjukkan bagaimana output teks dengan perintah print.

Contoh string :

         <?php
      print "<h2>Belajar PHP</h2>";
      print " Latihan PHP<br>";
      print " welcome ! <br>";
      ?>

Contoh Variabel :

<?php

$txt1 = "Belajar PHP";

$txt2 = "Latihan PHP";

$x = 10;

$y = 3;

print "<h2>$txt1</h2>";

print "Belajar PHP dan $txt2<br>";

print $x + $y;

?>

3. Printf

Printf memiliki fungsi yang hampir sama dengan echo dan print, perbedaanya printf dapat mengatur format tipe data yang akan ditampilakan.

Contoh :

<?php

Printf(“%s %d %0.02f <br />\n”, “string”, 18, 3.14);

Ket:

%s adalah format untuk string

%d adalah dormat untuk integer,notasi desimal

%f adalah format untuk desimal atau bilangan real

Format string selalu menggunakan tanda persen(%). Pada format %s mewakili kata”string”, %d mewakili 18, & %0.02f mewakili 3.14.

Format yang Dapat Digunakan Untuk PHP dalam Fungsi Date

Function : date('char')

Syntax:

date (date_format[,int timestamp])

Format Wajib diisi. Digunakan untuk menentukan format tanggal waktu.

Timestamp Bersifat pilihan, artinya boleh dimasukan atau tidak. Digunakan untuk menentukan catatan waktu.

Fungsi date() digunakan untuk pengolahan data berformat time / waktu atau tanggal / date.

Berikut ini beberapa jenis timestamp yang dapat digunakan untuk mengatur format tampilan anggal dan waktu
Time :
a : am atau pm
A : AM atau PM
g : Jam tanpa 0 di depan. Bernilai antara 1- 12.
G : Jam tanpa 0 di depan (format 24 jam). Bernilai antara 0- 23.
h : Jam dengan 0 di depan. Bernilai antara 01- 12.
H : Jam dengan 0 di depan (format 24 jam). Bernilai antara 00- 23.
i : Menit dengan 0 di depan. Bernilai antara 00-59.
s : Detik dengan 0 di depan. Bernilai antara 00-59.

Day :
d : Hari dalam bulan (tanggal) dengan 0 di depan. Bernilai antara 01-31.
j : Hari dalam bulan (tanggal) tanpa 0 di depan. Bernilai antara 1-31.
D : Hari dalam mingguan (disingkat). Bernilai antara Sun-Sat
l : Hari dalam mingguan. Bernilai antara Sunday-Saturday
w : Hari dalam mingguan tanpa 0 di depan. Bernilai antara 0-6.
z : Hari dalam tahunan tanpa 0 di depan. Bernilai antara 0-365.

Month:
m : Nomor bulan dengan 0 di depan (01-12)
n : Nomor bulan tanpa 0 di depan (1-12)
M : Singkatan dari bulan. (Jan-Dec)
F : Nama bulan lengkap. (January-December)
t : Jumlah hari dalam sebulan. (28-31)

Year:
L : 1 jika melompati tahun dan 0 jika tidak.
Y : Format tahun 4 digit
y : Format tahun 2 digit. (00-99)

Contoh :

<?php

echo "Today is " . date("Y/m/d") . "<br>";

echo "Today is " . date("Y.m.d") . "<br>";

echo "Today is " . date("Y-m-d") . "<br>";

echo "Today is " . date("l");

?>

Output :

Today is 2015/04/04

Today is 2015.04.04

Today is 2015-04-04

Today is Saturday

Selain untuk tanggal fungsi Date PHP juga dapat digunakan untuk mengambil waktu sekarang. Berikut format penulisan karakter untuk waktu :

h – Menampilkan jam sekarang (01-12)
i – Menampilkan menit sekarang (00-59)
s – Menampilkan detik sekarang (00-59)
a – Untuk menampilkan waktu am atau pm

Seperti dalam contoh pengambilan tanggal, karakter lain, seperti “/”, atau “.” “-” Juga dapat disisipkan di antara format karakter untuk menambahkan format tambahan. Perhatikan contoh program PHP dalam pemanfaatan fungsi date untuk mengambil waktu sekarang.

<?php

echo "The time is " . date("h:i:sa");

?>

Output :

The time is 16:58:32pm

Kita juga dapat mengambil tanggal dan waktu sekaligus dengan cara mengkombinasikan format karakter tanggal dan waktu dalam fungsi date PHP. Perhatikan contoh program dibawah :

<?php

echo "Tanggal dan Waktu sekarang adalah " . date("d/m/Y h:i:s");

?>

Output :

Tanggal dan Waktu sekarang adalah 16/04/2016 16:58:32

Minggu, 10 April 2016

Membuat Table dengan Format HTML dan CSS

Markup Html yang saya gunakan untuk membuat table:

<html>
<head>
<title>TABLE DATA MAHASISWA</title>
<link rel="stylesheet" type="text/css" href="style table mergina.css">
</head>
<body>
<table border="2">
<th>No</th>
<th>Nama Lengkap</th>
<th>NIM</th>
<th>Prodi</th>
<th>Kota Asal</th>
<tr class="no">
<td>1</td>
<td class="yes">Kurnia</td>
<td>201512064</td>
<td>Teknik Informatika</td>
<td>Dubai</td>
</tr>
<tr>
<td>2</td>
<td class="yes">Lina Annisa</td>
<td>201512048</td>
<td>Teknik Informatika</td>
<td>Beijing</td>
</tr>
<tr class="no">
<td>3</td>
<td class="yes">Mergina Larasati</td>
<td>201512034</td>
<td>Teknik Informatika</td>
<td>Bontang</td>
</tr>
<tr>
<td>4</td>
<td class="yes">Nur Aeni</td>
<td>201512059</td>
<td>Teknik Informatika</td>
<td>Busang</td>
</tr>
<tr class="no">
<td>5</td>
<td class="yes">Ummul Khair</td>
<td>201512019</td>
<td>Teknik Informatika</td>
<td>Santan</td>
</tr>
<tr>
<td>6</td>
<td class="yes">Jihan Halifah Z</td>
<td>201512001</td>
<td>Teknik Informatika</td>
<td>Washington DC</td>
</tr>
<tr class="no">
<td>7</td>
<td class="yes">Muhammad Alif A.R</td>
<td>201512007</td>
<td>Teknik Sipil</td>
<td>New Delhi</td>
</tr>
</table>
</body>
</html>

Berikut adalah kode css untuk di-linkkan antara html dan css:

table{
border-collapse: collapse;
border:1px solid white;
width: 750px;
height: 350px;

}
th{
font-size: 20px;
font-family: courier;
text-align: center;
background-color: purple;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td.yes{
text-align: left;
}
td{text-align: center;
}
tr.no{
text-align: left;
font-family: trebuchet;
font-size: 18px;
background-color: skyblue;
font-weight: bold;
}
tr.no:hover{
background-color: white;
color:pink;
}
tr{
text-align: left;
font-family: trebuchet;
font-size: 18px;
background-color: skyblue;
font-weight: bold;
background-color: yellow;
}
tr:hover{
background-color: pink;
color:white;

}

Berikut adalah hasil print outnya :

Minggu, 03 April 2016

Membuat Form dengan HTML

Tag Form digunakan untuk mengirimkan data, dalam tag <form> definisi </form> memiliki beberapa atribut yaitu :

Method ada 2 get & post.
Tag input <input/> merupakan tag tunggal
Tag untuk membuat Radio button ex: <inpu type="radio" name="nama" value="j"/>jj
Tag untuk membuat check box ex: <inpu type="checkbox" name="nama" value="K"/>Kt
Tag untuk membuat combo box <select> definisi </select>
Tag untuk membuat text area <textarea> definisi </textarea>

print scriptnya :

print outputnya :

Selasa, 22 Maret 2016

Membuat Table dengan HTML

Cara membuat table di HTML, kita membutuhkan setidaknya 3 tag yaitu : tag <table> definisi </table>, tag <tr> definisi </tr>, dan tag <td> definisi </td>.

Tag <table> digunakan untuk memulai table.
Tag <td> adalah singkatan dari table data, tag untuk penanda kolom. Dignakan untuk menginput data ke table.
Tag <tr> adalah singkatan dari table row, tag untuk penanda baris. Digunakan untuk membuat baris dari table.

Ada beberapa atribut yang bisa kita gunakan dalam tag table yaitu :

Colspan => digunakan untuk menggabungkan cell dalam 1 baris.
Rowspan => digunakan untuk menggabungkan cell dalam 1 kolom.
Border => digunakan untuk menentukan ukuran ketebalan garis pada bingkai table.
Width => digunakan untuk menentukan lebarnyanya table.
Align => digunakan untuk menentukan posisi paragraf/definisi. misalnya align="center" berarti paragrafnya akan berada di tengah.
Tag <b> definisi </b> => digunakan untuk membuat huruf tebal.
Font size => digunakan untuk menentukan besarnya huruf, misal font size="6" berarti ukuran fontnya akan sesuai yang ditulis (semakin kecil ukuran levelnya semakin kecil juga ukuran hurufnya).
Tag Heading <h1> => digunakan untuk membuat judul dari paragraf, atau bagian dari text yang merupakan judul.

Contoh membuat table dengan HTML

<h1><font size="5">Data NIlai Mahasiswa</font></h1>
<table border="2" width="400px">
<tr align="center">
<td rowspan="2"><b>NO</b></td>
<td rowspan="2"><b>Nama Mahasiswa</b></td>
<td colspan="2"><b>Nilai Tugas</b></td>
</tr>
<tr align="center">
<td><b>1</b></td>
<td><b>2</b></td>
</tr>
<tr>
<td align="center">1</td>
<td>Bonaventura</td>
<td align="center">70</td>
<td align="center">80</td>
</tr>
<tr>
<td align="center">2</td>
<td>Romagnoli</td>
<td align="center">70</td>
<td align="center">90</td>
</tr>
<tr>
<td align="center">3</td>
<td>Bartolaci</td>
<td align="center">90</td>
<td align="center">50</td>
</tr>
<tr>
<td align="center">4</td>
<td>Antoneli</td>
<td align="center">90</td>
<td align="center">60</td>
</tr>
<tr>
<td colspan="2"><b>Rata - rata</b></td>
<td align="center"><b>80</b></td>
<td align="center"><b>70</b></td>
</tr>
</table>

Print Outputnya :