My Education Video Happy watch :)

Rabu, 05 Desember 2012

Bagaimana Cara Membuat Website

Oke, pada postingan kali ini, saya akan menjelaskan secara singkat, bagaimana cara membuat website,
sederhana saja, saya akan menunjukkan langkah awal dalam membuat website itu seperti apa,

Seperti yang sudah kita ketahui, website adalah sebuah halaman atau lebih yang dibentuk dalam suatu kesatuan yang dapat diakses melalui koneksi internet yang disebut HTTP, untuk mengakses suatu website, cukup dengan mengetikan nama website pada browser di komputer anda,

Sebelum kita membuat website, ada beberapa hal yang perlu diketahui terlebih dahulu, yaitu pengetahuan mengenai HTML, apa sih HTML itu? HTML atau kepanjangan dari HyperText Markup Language yang adalah suatu bahasa yang dipergunakan untuk dapat mengakses koneksi HTTP yang diperlukan untuk mengakses internet.

Contoh penggunaan HTML :




Websiteku
Halo apa kabar?




Pada contoh diatas, itu disebut dengan TAG, didalam HTML ada banyak tag-tag yang dapat digunakan, contoh-contoh tag lainnya dapat dilihat di w3schools.com

Ini sekilas contoh-contoh tag yang bisa digunakan beserta deskripsinya, atau bisa lihat langsung di websitenya langsung


Ordered Alphabetically

New : New tags in HTML5.
TagDescription
<!--...-->Defines a comment
<!DOCTYPE> Defines the document type
<a>Defines a hyperlink
<abbr>Defines an abbreviation
<acronym>Not supported in HTML5. Defines an acronym
<address>Defines contact information for the author/owner of a document
<applet>Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded applet
<area>Defines an area inside an image-map
<article>NewDefines an article
<aside>NewDefines content aside from the page content
<audio>NewDefines sound content
<b>Defines bold text
<base>Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default color, size, and font for all text in a document
<bdi>NewIsolates a part of text that might be formatted in a different direction from other text outside it
<bdo>Overrides the current text direction
<big>Not supported in HTML5. Defines big text
<blockquote>Defines a section that is quoted from another source
<body>Defines the document's body
<br>Defines a single line break
<button>Defines a clickable button
<canvas>NewUsed to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>Defines a table caption
<center>Not supported in HTML5. Deprecated in HTML 4.01. Defines centered text
<cite>Defines the title of a work
<code>Defines a piece of computer code
<col>Specifies column properties for each column within a <colgroup> element 
<colgroup>Specifies a group of one or more columns in a table for formatting
<command>NewDefines a command button that a user can invoke
<datalist>NewSpecifies a list of pre-defined options for input controls
<dd>Defines a description of an item in a definition list
<del>Defines text that has been deleted from a document
<details>NewDefines additional details that the user can view or hide
<dfn>Defines a definition term
<dir>Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory list
<div>Defines a section in a document
<dl>Defines a definition list
<dt>Defines a term (an item) in a definition list
<em>Defines emphasized text 
<embed>NewDefines a container for an external (non-HTML) application
<fieldset>Groups related elements in a form
<figcaption>NewDefines a caption for a <figure> element
<figure>NewSpecifies self-contained content
<font>Not supported in HTML5. Deprecated in HTML 4.01. Defines font, color, and size for text
<footer>NewDefines a footer for a document or section
<form>Defines an HTML form for user input
<frame>Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>Not supported in HTML5. Defines a set of frames
<h1> to <h6>Defines HTML headings
<head>Defines information about the document
<header>NewDefines a header for a document or section
<hgroup>NewGroups heading (<h1> to <h6>) elements
<hr>Defines a thematic change in the content
<html>Defines the root of an HTML document
<i>Defines a part of text in an alternate voice or mood
<iframe>Defines an inline frame
<img>Defines an image
<input>Defines an input control
<ins>Defines a text that has been inserted into a document
<kbd>Defines keyboard input
<keygen>NewDefines a key-pair generator field (for forms)
<label>Defines a label for an <input> element
<legend>Defines a caption for a <fieldset>, < figure>, or <details> element
<li>Defines a list item
<link>Defines the relationship between a document and an external resource (most used to link to style sheets)
<map>Defines a client-side image-map
<mark>NewDefines marked/highlighted text
<menu>Defines a list/menu of commands
<meta>Defines metadata about an HTML document
<meter>NewDefines a scalar measurement within a known range (a gauge)
<nav>NewDefines navigation links
<noframes>Not supported in HTML5. Defines an alternate content for users that do not support frames
<noscript>Defines an alternate content for users that do not support client-side scripts
<object>Defines an embedded object
<ol>Defines an ordered list
<optgroup>Defines a group of related options in a drop-down list
<option>Defines an option in a drop-down list
<output>NewDefines the result of a calculation
<p>Defines a paragraph
<param>Defines a parameter for an object
<pre>Defines preformatted text
<progress>NewRepresents the progress of a task
<q>Defines a short quotation
<rp>NewDefines what to show in browsers that do not support ruby annotations
<rt>NewDefines an explanation/pronunciation of characters (for East Asian typography)
<ruby>NewDefines a ruby annotation (for East Asian typography)
<s>Defines text that is no longer correct
<samp>Defines sample output from a computer program
<script>Defines a client-side script
<section>NewDefines a section in a document
<select>Defines a drop-down list
<small>Defines smaller text
<source>NewDefines multiple media resources for media elements (<video> and <audio>)
<span>Defines a section in a document
<strike>Not supported in HTML5. Deprecated in HTML 4.01. Defines strikethrough text
<strong>Defines important text
<style>Defines style information for a document
<sub>Defines subscripted text
<summary>NewDefines a visible heading for a <details> element
<sup>Defines superscripted text
<table>Defines a table
<tbody>Groups the body content in a table
<td>Defines a cell in a table
<textarea>Defines a multiline input control (text area)
<tfoot>Groups the footer content in a table
<th>Defines a header cell in a table
<thead>Groups the header content in a table
<time>NewDefines a date/time
<title>Defines a title for the document
<tr>Defines a row in a table
<track>NewDefines text tracks for media elements (<video> and <audio>)
<tt>Not supported in HTML5. Defines teletype text
<u>Defines text that should be stylistically different from normal text
<ul>Defines an unordered list
<var>Defines a variable
<video>NewDefines a video or movie
<wbr>NewDefines a possible line-break

Dalam membuat website, pengetahuan mengenai HTML saja seperti tag-tag diatas tidaklah cukup, bila anda memang ingin serius mendalami web dan ingin mendevelop suatu website, anda juga perlu untuk mengetahui teknologi website yang lainnya, seperti bahasa pemrograman PHP dan pengetahuan dasar database(MYSQL), namum ada teknologi-teknologi pendukung lainnya untuk membuat tampilan website anda menjadi lebih menarik, seperti CSS(Cascading Style Sheet), JS(Javascript), dan banyak lagi yang lainnya.

Contoh-contoh website yang menggunakan bahasa pemrograman PHP :

1. Facebook.com




















Facebook merupakan salah satu website social media(jejaring sosial) yang menggunakan bahasa pemrograman PHP.

2. Dinomarket.com(Indonesia)




















Contoh lainnya adalah Dinomarket.com, situs ini adalah situs Online shop(penjualan barang online) yang juga menggunakan bahasa pemrograman PHP

3. Kaskus.com(Indonesia)




















Nah, yang berikut ini adalah contoh website FORUM yang juga menggunakan bahasa pemrograman PHP, dan masih banyak contoh-contoh website yang lainnya, yang juga menggunakan bahasa pemrograman PHP


Sudah jelas sekali, bahwa peranan PHP dalam dunia website begitu powerful, sehingga banyak developer website menggunakan bahasa pemrograman PHP dalam membangun sebuah website.

Oke, segitu saja penjelasan singkat mengenai apa sih itu website, bagaimana perkembangan dunia website dan apa saja pengetahuan yang diperlukan untuk membangun sebuah website, saatnya kita akan langsung membuat contoh sederhana bagaimana cara cara dalam membuat website, dan akan dijelaskan langkah demi langkah

Oke, daritadi kita membahas PHP, apa sih kok PHP pemberi harapan palsu? oh, bukan, php adalah bahasa yang dibuat oleh Rasmus Lerdorf orang yang membuat dan juga membuka paradigma tentang aplikasi website pada dunia.

contoh penggunaan PHP
 


masih banyak lagi sebenarnya tentang website, ga cuma sebatas PHP saja, pada contoh kali ini saya membuat website dengan php framework, wah apa lagi tuh framework? framework menurut definisi saya adalah sebuah library/class yang telah dibuat olah pengembang-pengembang web diluar sana yang fungsinya memberikan kemudahan bagi developer website untuk mengembangkan dan mamaintenance websitenya

yuk kita kenali macam macam framework didalam php

1. Code Igniter Framework

2. Yii Framework

3. ZKoss Framework

4. Cake Framework

5. Symphony Framework

6. Zend Framework

dan masih banyak framework yang lainnya yang akan kita bahas di postingan selanjutnya, kita tidak akan membahas framework ini satu demi satu karena saya yakin ga akan ada habis habisnya apalagi klo kita bahas mendalam mengenai struktur yang dimiliki oleh setiap framework.


Oke ga berpanjang lebar inilah website yang sedang saya buat, kebetulan website yang saya kerjakan bersama ke 2 teman saya ini menggunakan framework YII, website ini memiliki deadline 1 bulan lebih terhitung dari tanggal 12 November kemarin, karena kebetulan tugas ini yaitu membuat website, yasudah saya tampilkan saja dulu sementara website yang sudah saya hosting dan bisa di akses di server sementara kami di http://www.adfinbureau.com/jejaring

tampilan halaman login


tampilan halaman register


tampilan halaman setelah login(personal tab)


tampilan tab blog


tampilan penulisan blog pribadi


tampilan tab diskusi


tampilan posting posting yang ada dalam ruang diskusi


tampilan diskusi forum


masih banyak fitur fitur lain yang belum disebutkan, namum fitur fitur lainnya adalah fitur fitur yang hanya dikhususkan untuk anggota selain anggota umum.