Your Ad Here
Adsense Indonesia

Membuat buku tamu PHP sederhana

Selasa, 23 November 2010

Ikhtisar
Dalam tutorial ini buatlah3 file 

1. guestbook.php
 2. addguestbook.php
 3. viewguestbook.php
 

Langkah
 1. Buat nama tabel "buku tamu" pada database "test".
 2. Membuat file guestbook.php.
 3. Membuat file addguestbook. php.
 4. Buat file viewguestbook.php

 -----------------------------------------------------------------------------------------------------------------

1. Set up database  




CREATE TABLE `guestbook` (
`id` int(4) NOT NULL auto_increment,
`name` varchar(65) NOT NULL default '',
`email` varchar(65) NOT NULL default '',
`comment` longtext NOT NULL,
`datetime` varchar(65) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Jika Anda tidak tahu cara membuat database dan tabel, bacalah tutorial ini


2. Membuat file guestbook.php

View in Browser


############### Code
<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><strong>Test Sign Guestbook </strong></td>
</tr>
</table>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form id="form1" name="form1" method="post" action="addguestbook.php">
<td>
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td width="117">Name</td>
<td width="14">:</td>
<td width="357"><input name="name" type="text" id="name" size="40" /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" id="email" size="40" /></td>
</tr>
<tr>
<td valign="top">Comment</td>
<td valign="top">:</td>
<td><textarea name="comment" cols="40" rows="3" id="comment"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><strong><a href="viewguestbook.php">View Guestbook</a> </strong></td>
</tr>
</table>


3. Membuat file addguestbook.php




############### Code
<?php
$host="localhost";
// Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name="test"; // Database name
$tbl_name="guestbook"; // Table name
// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect server ");
mysql_select_db("$db_name")or die("cannot select DB");
$datetime=date("y-m-d h:i:s"); //date time

$sql="INSERT INTO $tbl_name(name, email, comment, datetime)VALUES('$name', '$email', '$comment', '$datetime')";
$result=mysql_query($sql);
//check if query successful
if($result){
echo "Successful";
echo "<BR>";
echo "<a href='viewguestbook.php'>View guestbook</a>"; // link to view guestbook page
}

else {
echo "ERROR";
}
mysql_close();
?>


4. Membuat file viewguestbook.php

Tampilan dari Dreamweaver / Diagram


############### Code
<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><strong>View Guestbook | <a href="guestbook.php">Sign Guestbook</a> </strong></td>
</tr>
</table>
<br>

<?php

$host="localhost";
// Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name="test"; // Database name
$tbl_name="guestbook"; // Table name
// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect server ");
mysql_select_db("$db_name")or die("cannot select DB");
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
while($rows=mysql_fetch_array($result)){
?>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td><table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>ID</td>
<td>:</td>
<td><? echo $rows['id']; ?></td>
</tr>
<tr>
<td width="117">Name</td>
<td width="14">:</td>
<td width="357"><? echo $rows['name']; ?></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><? echo $rows['email']; ?></td>
</tr>
<tr>
<td valign="top">Comment</td>
<td valign="top">:</td>
<td><? echo $rows['comment']; ?></td>
</tr>
<tr>
<td valign="top">Date/Time </td>
<td valign="top">:</td>
<td><? echo $rows['datetime']; ?></td>
</tr>
</table></td>
</tr>
</table>
<BR>
<?
}
mysql_close();
//close database
?>

Membuat database, tabel dan mengelola database MySQL menggunakan phpMyAdmin

PhpMyAdmin adalah alat untuk mengelola database MySQL yang bebas biaya, dan berbasis web. Tutorial ini akan menjelasakan belajar cara membuat database, membuat tabel, termasuk ekspor (backup) database MySQL.


Gambarang Proses

phpMyAdmin adalah alat yang ditulis dalam PHP dimaksudkan untuk menangani administrasi MySQL melalui Web. Saat ini ia dapat membuat dan drop database, membuat / drop / mengubah tabel, menghapus / mengedit / menambahkan kolom, mengeksekusi pernyataan SQL, mengelola kunci pada bidang, mengelola hak istimewa, data ekspor ke dalam berbagai format.


Instalasi-
Letakan Folder PhpMyAdmin di tempat Anda menyimpan file php 




1. Membuat database menggunakan phpMyAdmin 

database baru

Untuk membuat database baru gunakan form ini, ketikkan nama database kemudian klik "Create" . Dalam contoh ini saya membuat database dengan nama "test_create_DB".

2. Membuat Tabel

Tabel di database

Setelah database dibuat, form ini akan ditampilkan. Masukkan nama tabel dan jumlah field. Dalam contoh ini, saya membuat nama tabel "web_members" untuk menyimpan daftar anggota web saya yang memiliki 4 field (id, nama, nama belakang, email)
Hasil setelah membuat tabel di database 
 

3. Membuat tabel dengan menjalankan query SQL
 
Halaman SQL

Anda dapat membuat tabel dengan mrnjalankan query SQL misalnya, menempatkan kode ini dalam bentuk dan klik "Go"

CREATE TABLE `web_members` (
`id` int(4) NOT NULL auto_increment,
`name` varchar(65) NOT NULL default '',
`lastname` varchar(65) NOT NULL default '',
`email` varchar(65) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;

atau browse dari file teks (baca database ekspor untuk membuat file teks (.sql)) 

4. Export database

Halaman Expor


Dalam Ekspor tab. Anda dapat mengekspor database anda dalam banyak format seperti :
 - SQL (file teks sql.) 
 - Latex
 - Microsoft Exel 2000
 - Microsoft Word 2000 
 - CVS untuk MS Exel 
 - CVS 
 - XML

Langkah 

  1. Pilih tabel yang ingin Anda ekspor atau pilih semua tabel 
  2. Pilih format file 
  3. Pilih save as file (jika Anda ingin menyimpannya sebagai file. Jika tidak, maka akan menunjukkan hanya query Sql) 
  4. Pilih kompresi 
     - None / Tanpa Kompresi 
     - Zip (zip.) 
     - Gzip (gzip.)

HTML5 : HTML Versi Terbaru

Senin, 22 November 2010

HTML dikembangkan oleh W3C hingga tahun2004, ketika pertumbuhan anggota kelompok kerja HTML  terganggu dengan arah W3C yang sedang terjadi pada HTML. Mereka merasa bahwa W3C tidak menaruh perhatian yang cukup terhadap perkembangan dunia nyata mengenai kebutuhan bahasa dan terlalu  berfokus pada XML dan XHTML. Oleh karena itu, mereka membentuk sebuah kelompok baru yang disebut WHATWG (Web Hypertext Application Technology Working Group) yang ditujukan untuk berkembang di Web. Mereka mulai bekerja pada sebuah spesifikasi baru dari HTML - HTML 5.
HTML 5 adalah versi baru dari HTML 4.01 dan XHTML 1.0 yang berfokus pada kebutuhan pengembang aplikasi Web sebagus perkembangan HTML untuk mengatasi masalah-masalah yang ditemukan dalam spesifikasi saat ini.



Mengapa Anda Harus Mempelajari HTML-5 ?
HTML 5 adalah spesifikasi terbaru untuk HTML, dan banyak browser yang akan mulai mendukung di masa depan. Satu hal baik tentang HTML 5 adalah bahwa versi ini berusaha untuk tetap kompatibel. Jadi jika Anda tidak ingin ketinggalan perkembangan IT masa kini, apa salahnya mempelajari materi ini.
Jika Anda membangun sebuah aplikasi Web, akhirnya Anda akan belajar HTML 5. Ada banyak atribut baru dan tag yang dibangun hanya untuk aplikasi Web. Sebagai contoh, ada beberapa event handler baru untuk drag dan drop:

    
* ondrag
    * ondragstart
    * ondragend
    
* ondrop
Dan masih banyak lagi.
Dewasa ini, tidak ada banyak dukungan untuk HTML 5, namun dukungan akan tumbuh sepanjang waktu. Dengan tetap mengikuti perubahan, Anda akan siap saat para Webmaster mulai menggunakannya.


 
HTML References / Web Design References

CSS-2: Properties

CSS 2 mencakup semua dari CSS 1 properties, ditambah sekelompok properti baru. CSS-1properties tercantum pada halaman 1 properti CSS.

 

Properties CSS-2 baru tercantum di bawah ini:

 

A

  • :after pseudo-element
  • azimuth Aural Style Sheets

B

  • :before pseudo-element
  • border-bottom-color
  • border-bottom-style
  • border-collapse
  • border-left-color
  • border-left-style
  • border-right-color
  • border-right-style
  • border-spacing
  • border-top-color
  • border-top-style
  • bottom

C

  • caption-side
  • clip
  • content
  • counter-increment
  • counter-reset
  • cue Aural Style Sheets
  • cue-after Aural Style Sheets
  • cue-before Aural Style Sheets
  • cursor

D

  • direction

E

  • elevation Aural Style Sheets
  • empty-cells

F

  • :first-child pseudo-class
  • :focus pseudo-class
  • font-size-adjust
  • font-stretch

L

  • :lang pseudo-class
  • left

M

  • max-height
  • max-width
  • min-height
  • min-width

O

  • orphans
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow

P

  • page-break-after
  • page-break-before
  • page-break-inside
  • pause-after Aural Style Sheets
  • pause-before Aural Style Sheets
  • pause Aural Style Sheets
  • pitch Aural Style Sheets
  • pitch-range Aural Style Sheets
  • play-during Aural Style Sheets
  • position

Q

  • quotes

R

  • richness Aural Style Sheets
  • right

S

  • speak Aural Style Sheets
  • speak-header Aural Style Sheets
  • speak-numeral Aural Style Sheets
  • speak-punctuation Aural Style Sheets
  • speech-rate Aural Style Sheets
  • stress Aural Style Sheets

T

  • table-layout
  • top

U

  • unicode-bidi

V

  • visibility
  • voice-family Aural Style Sheets
  • volume Aural Style Sheets

W

  • widows

Z

  • z-index

CSS-1: Properties

CSS-1 adalah dasar dari CSS. Ini adalah Properties pertama yang didefinisikan. Kebanyakan browser mendukung ini tanpa adanya masalah.

Di bawah ini daftar Properties CSS-1

A

  • :active pseudo-class

B

  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border
  • border-bottom
  • border-bottom-width
  • border-color
  • border-left
  • border-left-width
  • border-right
  • border-right-width
  • border-style
  • border-top
  • border-top-width
  • border-width

C

  • clear
  • color

D

  • display

F

  • :first-letter pseudo-element
  • :first-line pseudo-element
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

H

  • height
  • :hover pseudo-class

L

  • letter-spacing
  • line-height
  • :link pseudo-class
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

M

  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top

P

  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top

T

  • text-align
  • text-decoration
  • text-indent
  • text-transform

V

  • vertical-align
  • :visited pseudo-class

W

  • white-space
  • width
  • word-spacing

    Referensi HTML 4.01 / XHTML 1.0

    HTML Tag Reference - Alphabetical

    Jika ada D di kolom usang, unsur ini pernah menjadi bagian dari spesifikasi, tetapi tidak lagi.
    Dalam kolom DTD, elemen merupakan bagian dari XHTML 1.0 dan HTML 4.01 DTD, namun tidak jika mereka memiliki kode berikut:

    • L = loose DTD
    • F = frameset DTD
    • N = not in a DTD
    • X = XML not XHTML or HTML


    Tag Explanation FF IE NN SF Dep DTD
    <a> </a> Anchor or link 1 2 2 1
    <abbr> </abbr> Abbreviation 1 7 6 1
    <acronym> </acronym> Acronym 1 4 6 1
    <address> </address> Address or authors of the document 1 3 6 1 D
    <applet> </applet> Java applet embedded in page 1 3 6 1 D L
    <area /> Client-side image map 1 2 2 1
    <audioscope> </audioscope> Visual rendering of sound on WebTV - - - - N
    <b> </b> Bold 1 2 2 1
    <base /> Base URI paths for elements in the document 1 2 2 1
    <basefont /> Base font size for the document 1 3 2 1 D L
    <bdo> </bdo> Bi-directional algorithm 1 - 7 1
    <big> </big> Large font size 1 3 2 1
    <bgsound /> Background music - 2 - - N
    <blackface> </blackface> Double-weight bold text on WebTV - - - - N
    <blink> </blink> Blink text on and off 1 - 2 - N
    <blockquote> </blockquote> Long quotation 1 2 2 1
    <body> </body> Body of the page 1 1 1 1
    <br /> Line break 1 2 2 1
    <button> </button> HTML form button 1 4 6 1
    <!-- --> Comment 1 1 1 1
    <caption> </caption> Table caption 1 2 2 1
    <center> </center> Align to center 1 2 2 1 D L
    <cite> </cite> Citation 1 2 2 1
    <code> </code> Code reference 1 2 2 1
    <col /> Table column 1 4 6 1
    <colgroup> </colgroup> Table column grouping 1 4 6 1
    <comment> </comment> Comment in Internet Explorer - 2 - - N
    <!DOCTYPE> Document type definition 1 2 2 1 X
    <dd> </dd> Definition list description 1 2 2 1
    <del> </del> Deleted text 1 5 6 1
    <dfn> </dfn> Definition 1 5 6 1
    <dir> </dir> Directory list 1 2 2 1 D L
    <div> </div> Logical division 1 3 2 1
    <dl> </dl> Definition list 1 3 2 1
    <dt> </dt> Definition list term 1 2 2 1
    <em> </em> Emphasis 1 2 2 1
    <embed /> Embedded element 1 3 2 1 D N
    <fieldset> </fieldset> Form controls group 1 4 6 1
    <font> </font> Font color, face, and size 1 2 2 1 D L
    <form> </form> Form 1 2 2 1
    <frame /> Frame 1 3 2 1 F
    <frameset> </frameset> Frameset 1 3 2 1 F
    <h1> </h1> First level headline 1 2 2 1
    <h2> </h2> Second level headline 1 2 2 1
    <h3> </h3> Third level headline 1 2 2 1
    <h4> </h4> Fourth level headline 1 2 2 1
    <h5> </h5> Fifth level headline 1 2 2 1
    <h6> </h6> Sixth level headline 1 2 2 1
    <head> </head> Head of the document 1 1 1 1
    <hr /> Horizontal rule 1 2 2 1
    <html> </html> Root element of a Web page 1 1 1 1
    <i> </i> Italics text style 1 2 2 1
    <iframe> </iframe> Inline frame 1 2 7 1
    <img /> Image 1 1 1 1
    <input /> Input form element * * * *
    <input type="button" /> Button form element 1 4 4 1
    <input type="checkbox" /> Checkbox form element 1 2 2 1
    <input type="file" /> File upload form element 1 2 2 1
    <input type="hidden" /> Hidden form field element 1 2 2 1
    <input type="image" /> Image form element 1 2 2 1
    <input type="password" /> Password form element 1 2 2 1
    <input type="radio" /> Radio button form element 1 2 2 1
    <input type="reset" /> Reset button form element 1 2 2 1
    <input type="submit" /> Submit button form element 1 2 2 1
    <input type="text" /> Text field form element 1 2 2 1
    <ins> </ins> Inserted text 1 5 6 1
    <isindex /> Single line text input control 1 2 2 1 D L
    <kbd> </kbd> Text to be entered by the user 1 2 2 1
    <keygen /> Generate secure keys for certificate management 1 - 3 1 N
    <label> </label> Form label 1 4 6 1
    <layer> </layer> Layered content - - 3 - N
    <legend> </legend> Form fieldset caption 1 4 6 1
    <li> </li> List item 1 2 2 1
    <link /> Link to related documents 1 2 4 1
    <map> </map> Client-side image map 1 2 2 1
    <marquee> </marquee> Scrolling text marquee 1 2 7 1 N
    <menu> </menu> Menu list 1 2 2 1 D L
    <meta /> Metainformation about the document 1 2 2 1
    <noembed> </noembed> Content when embed isn't available 1 3 2 1 D N
    <noframes> </noframes> Content when frames aren't available 1 3 2 1 F
    <noscript> </noscript> Content when scripts aren't available 1 4 3 1
    <object> </object> Non-standard object 1 2 2 1
    <ol> </ol> Ordered or numbered list 1 2 2 1
    <optgroup> </optgroup> Group of options in a select list 1 6 6 1
    <option> </option> Option in a select list 1 2 2 1
    <p> </p> Paragraph 1 1 1 1
    <param /> Parameter of an object element 1 3 2 1
    <pre> </pre> Pre-formatted text 1 2 2 1
    <q> </q> Short inline quotation 1 4 6 1
    <s> </s> Strikeout text 1 4 3 1 D L
    <samp> </samp> Sample output 1 2 2 1
    <script> </script> Scripts 1 4 3 1
    <select> </select> Select or drop-down menu lists 1 2 2 1
    <shadow> </shadow> Shadowed text on WebTV - - - - N
    <sidebar> </sidebar> Left side navigation bar on WebTV - - - - N
    <small> </small> Small font size 1 3 2 1
    <span> </span> Generic inline style container 1 4 4 1
    <strike> </strike> Strikeout text 1 4 3 1 D L
    <strong> </strong> Strong emphasis 1 2 2 1
    <style> </style> Style sheets 1 3 4 1
    <sub> </sub> Subscript 1 3 2 1
    <sup> </sup> Superscript 1 3 2 1
    <table> </table> Table 1 2 2 1
    <tbody> </tbody> Table body rows 1 4 6 1
    <td> </td> Table cell 1 2 2 1
    <textarea> </textarea> Multi-line form element 1 2 2 1
    <tfoot> </tfoot> Table footer rows 1 4 6 1
    <th> </th> Table header cell 1 2 2 1
    <thead> </thead> Table header rows 1 4 6 1
    <title> </title> Title 1 1 1 1
    <tr> </tr> Table row 1 2 2 1
    <tt> </tt> Teletype text 1 2 2 1
    <u> </u> Underlined text 1 2 2 1 D L
    <ul> </ul> Unordered or buletted list 1 2 2 1
    <var> </var> Variable or user defined text 1 2 2 1

    Tips : 5 Software Terbaik untuk Test Website Anda pada Web-Browser

    Sabtu, 20 November 2010

    Kegembiraan besar menjadi seorang web designer, semakin banyak cara untuk melihat situs web baru Anda dalam berbagai browser, hanya untuk menemukan bahwa setiap membuat situs harus memperhatikan tingkat konsistensi. Maksudnya, berapa banyak Web-browser yang dapat menampilkan website anda dengan baik dan seberapa baik menampilkannya. Jika anda merasa bingung, video ini mungkin akan membantu anda, dan akan menunjukkan lima layanan yang paling populer dan alat-alat untuk pengujian website di berbagai browser.
    Selamat menikmati ...



    Browsershots

     

    Adobe Browserlab



    Litmusapp (paid service)


     


    VMware Fusion

     


     


    IE Tester

     


     

     

    Cara Mengubah Ukuran Widget Feedjit

    Rabu, 17 November 2010

     Tambahkan script :

    <div style="height:700px; width:300px; ">

    <!--KODE FEEDJIT ANDA DI SINI -->

    </div>


    sehingga akan menjadi:

    <div style="height:700px; width:300px; ">


    <script type="text/javascript" src="http://feedjit.com/serve/?vv=693&amp;tft=3&amp;dd=0&amp;wid=1431815eb16b87bd&amp;pid=0&amp;proid=0&amp;bc=5C636B&amp;tc=FFFFFF&amp;brd1=336699&amp;lnk=CEFF2B&amp;hc=FFFFFF&amp;hfc=464E52&amp;btn=1E2224&amp;ww=200&amp;wne=10&amp;wh=Live+Traffic+Feed&amp;hl=0&amp;hlnks=0&amp;hfce=0&amp;srefs=0&amp;hbars=0"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

    </div>


    Keterangan : 
    • Warna Merah = Kode Feedjit Anda
    • Warna Biru = Angka yang bisa anda ubah sesuai kehendak.

    Cara Menjaga Keamanan Website Anda

    1. Berikan Nama Unik untuk Folder Admin Anda


    2. Mengganti Password Default Admin

    3. Mendisable Edit Username


    4. Menghalau Spam dengan Captcha

    5. Hentikan XSS Attack


    6. Menangkal SQL Injection


    7. Menjinakkan Blind SQL Injection


    8. CegahVoting Ganda pada Aplikasi Poling


    9. Cegah Browsing folder secara langsung dengan *.htaccess


    10. Atasi Input Data Tanpa Spasi


    11. Tutup Celah Aplikasi Download


    12. Sensor Kata-kata yang tidak Senonoh

    13. Validasi Data Menggunakan Javascript

    14. Cegah Editing Password oleh User Biasa

    64 Sumber Inspirasi Desain Website Part 1

    Senin, 15 November 2010

    64 Sumber Inspirasi Design Website

    Desain Website dari tahun ke tahun telah menjadi lebih baik dan indah. Anda dapat menemukan ribuan inspirasi online - Logos, Ikon, Website, Colorschemes ...
    Saya akan menunjukan situs terbaik dan terbesar. Jadi duduk kembali, santai dan biarkan diri Anda inspirasi!
    Logo
    LogoPondInspirasi Identitas

    faveupInspirasi Desain Galeri


    LogoSauceInspirasi Logo Desain


    Icons

    IconBuffetIkon Gratis, Gudang Ikon, danDesain Ikon Buatan Sendiri


    IconBaseIde Konektifitas


    IconfactoryDesain Ikon Terbaik


    Website Style Showcases

    theBestDesignsDesain CSS dan Flash Terbaik


    FWAWebsite tentang Penghargaan Terfavorit


    UnmatchedstyleInspirasi Desain CSS dan Galeri CSS


    MostInspiredDesain dari seluruh CSS Desain dan CSS Galeri Populer


    WebcremeInspirasi Web Desain


    Screenalicio.usDapatkan Inspirasi!


    CSSbasedDesain Pecinta Alam


    CSSnatureCSS dirancang dengan baik dan xhtml berdasarkan sifat desain situs Web 


    CssZenGardenDesain CSS yang Indah


    CSSimpress CSS Galeri Terbaru


    CSSGalerieHanya Galeri


    CssFlashInspirasi Harian


    CSSclipInspirasi Desain Web dan Galeri


    CSSmania –  menampilkan CSS yang paling update di seluruh dunia



    Tunggu Positng Selanjutnya ...Terima Kasih ...