HTML Attributes - stikom career center surabaya
advertisement
TRAINING PHP ALUMNI DAN CALON ALUMNI STMIK SURABAYA Teguh Sutanto Sistem Informasi | STMIK Surabaya 19-23 Juni 2014 Tujuan Membuat dan memanipulasi basis data MySQL Membuat Aplikasasi web dengan PHP Case Study: Manajeman Keanggotaan Koperasi Wanita • Manajemen Anggota Koperasi Wanita adalah aplikasi berbasis web yang digunakan untuk melakukan pengaturan terhadap data anggota koperasi wanita. Pengaturan (manajemen) meliputi: • • • • • • Pendaftaran Anggota Penambahan Kelompok Update Data Anggota Update Data Kelompok Pertemuan Kelompok Pembayaran Simpanan Pokok dan Simpanan Wajib Web Programming HTML CSS JavaScript Database Server Side REVIEW HTML Basic Syntax, Form, Input What is HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is a markup language • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages Basic HTML Tags File text dengan extention Htm, html, xhtml Example Explained 1. 2. 3. 4. 5. The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph HTML Tags • HTML markup tags are usually called HTML tags. • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <p> and </p> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a slash before the tag name • Start and end tags are also called opening tags and closing tags HTML Element Syntax • • • • • • An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes HTML Attributes • HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value" Common Attributes Attribute id Description Specifies one or more classnames for an element (refers to a class in a style sheet) Specifies a unique id for an element style Specifies an inline CSS style for an element title Specifies extra information about an element (displayed as a tool tip) class Lab 1 : Membuat Index.html Website Layouts • • Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. Lab 2: Membuat Layout <div id="container" style="width:900px"> <div id="header" style="background-color:#FFA500;height:80px;"> <h1 style="margin-bottom:0;">Manajemen Keanggotaan Koperasi Wanita </h1></div> <div id="menu" style="backgroundcolor:#FFD700;height:250px;width:160px;float:left;"> <a href="" title="Pendaftaran Anggota">Pendaftaran Anggota</a></br> <a href="">View Data Anggota</a></br> <a href="">View Data Kelompok</a></br> </div> <div id="content" style="backgroundcolor:#EEEEEE;height:250px;width:740px;float:left;"> ISI WEB</div> <div id="footer" style="background-color:#FFA500;clear:both;textalign:center;"> Manajemen Anggota Koperasi dibuat Oleh [NAMA ANDA] &copy;2014</div> </div> Modifikasi Index.html HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. HTML Form Tags <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button Lab 3. Membuat Form Add Anggota www.anggotakop.com Pendafrataran Anggota Koperasi No Anggota text Nama text Id Kelompok 001 002 003 004 Alamat text No. Telp text Tempat Lahir text Tanggal Lahir text Simpan Batal AddAnggota.html <HTML> <HEAD> </HEAD> <BODY> <h1> Pendaftaran Anggota Koperasi </h1> <form method=“POST” action=“proses.php”> <table> <tr> <td> <label for="txtNoAnggota">No Anggota</label> </td> <td> <input type="Text" id="txtNoAnggota"/> </td> </tr> <tr> <td> <label for="txtNama">Nama</label> </td> <td> <input type="Text" id="txtNama"/> </td> </tr> What is PHP? PHP is an acronym for "PHP Hypertext Preprocessor" PHP is a widely-used, open source scripting language PHP scripts are executed on the server PHP costs nothing, it is free to download and use What is a PHP File? PHP files can contain text, HTML, CSS, JavaScript, and PHP code PHP code are executed on the server, and the result is returned to the browser as plain HTML PHP files have extension ".php" What Can PHP Do? PHP can generate dynamic page content PHP can create, open, read, write, delete, and close files on the server PHP can collect form data PHP can send and receive cookies PHP can add, delete, modify data in your database PHP can restrict users to access some pages on your website PHP can encrypt data Why PHP? PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) PHP is compatible with almost all servers used today (Apache, IIS, etc.) PHP supports a wide range of database PHP is free. Download it from the official PHP resource: www.php.net PHP is easy to learn and runs efficiently on the server side Basic PHP Syntax A PHP script can be placed anywhere in the document. A PHP script starts with <?php and ends with ?> The default file extension for PHP files is ".php". A PHP file normally contains HTML tags, and some PHP scripting code. PHP Variables As with algebra, PHP variables can be used to hold values (x=5) or expressions (z=x+y). A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume). Rules for PHP variables: A variable starts with the $ sign, followed by the name of the variable A variable name must start with a letter or the underscore character A variable name cannot start with a number A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ ) Variable names are case sensitive ($y and $Y are two different variables) GET vs. POST Both GET and POST create an array (e.g. array( key => value, key2 => value2, key3 => value3, ...)). This array holds key/value pairs, where keys are the names of the form controls and values are the input data from the user. Both GET and POST are treated as $_GET and $_POST. These are superglobals, which means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special. $_GET is an array of variables passed to the current script via the URL parameters. $_POST is an array of variables passed to the current script via the HTTP POST method.
