English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Senin, 22 April 2013

Aptana Studio 3 Guided Tour dan Tutorial: Membuat proyek Web Menggunakan HTML 5 Boilerplate Kerangka

Aptana Studio 3 Guided Tour dan Tutorial: Membuat proyek Web Menggunakan HTML 5 Boilerplate FrameworkAptana Studio adalah salah satu alat yang paling komprehensif di pasar Web Editor bebas. Meskipun fungsi utamanya adalah sebagai lingkungan pengembangan Ajax, adalah sama mahir bekerja dengan PHP, Ruby, Rails,. Net, Titanium, PyDev (Python, Jython, Besi Python).

Dalam tutorial ini, kita akan mendapatkan lebih mengenal Aptana Studio 3 dengan membuat halaman berlangganan newsletter hipotetis. Halaman ini akan berisi kolom teks yang menerima alamat email dan sebuah tombol untuk mengirimkan ke server menggunakan jQuery. Pada server-side, script PHP akan memverifikasi bahwa email telah diterima dan mengirim pesan kembali ke browser untuk menampilkan. Dalam membangun proyek ini, kita akan belajar bagaimana untuk memasukkan perpustakaan JavaScript dalam proyek-proyek kami, cara mengkonfigurasi Aptana Studio untuk menggunakan Web server kami, dan cara mengatur Server / Runtime Konfigurasi kita sendiri dan Setelan Pratinjau.


Apa yang Anda butuhkan??

Jika Anda belum melakukannya, download Aptana Studio 3 sebagai aplikasi mandiri atau plug-in untuk Eclipse 3.5 +. Aptana Studio membutuhkan beberapa alat pihak ketiga, beberapa datang dengan paket instalasi, beberapa tidak. Sun / Oracle Java 1.5.x atau lambat harus diinstal secara terpisah pada Mac dan Linux, sementara installer Windows termasuk versi yang kompatibel dari JaVa. Git digunakan secara internal untuk memperbarui lingkungan scripting Anda. Pada Windows, Aptana merekomendasikan PortableGit dari msysgit karena memiliki shell bash untuk mengeksekusi perintah. Pertama kali Anda membuka Aptana Studio, ia akan menawarkan untuk menginstal untuk Anda.

Anda juga akan membutuhkan sebuah web server yang mendukung PHP. Built-in server yang dilengkapi dengan Aptana hanya cocok untuk panggilan Ajax dan halaman web dasar porsi. Saya akan merekomendasikan Wamp atau Xampp. Saya akan menggunakan Wamp pada akhir saya.

Setelah Anda yakin bahwa Anda telah menginstal semua alat yang diperlukan, start up Aptana Studio dan menyingsingkan lengan baju Anda
 



Memilih Jenis Proyek??

Aptana Studio menawarkan berbagai jenis proyek untuk memilih dari. Namun, bukan pilih Proyek PHP , saya sarankan memilih "Web Proyek" , karena memberi Anda akses mudah ke beberapa template yang sangat berguna dan file dalam kerangka boilerplate HTML5 baik:
 New Project Wizard Klik Next> dan masukkan "NewsletterSubscription" untuk nama proyek. Hapus tanda centang "Use default location" untuk memasuki root web server web kami.

Gunakan tombol Browse untuk mencari web server Anda document root. Untuk Wamp itu adalah "www" folder.

Setelah Anda mengklik tombol Finish, proyek baru Anda akan muncul di Project Explorer pane. Jika Anda mengembangkan proyek dengan mengklik plus [+] tanda di sebelah kiri nama
Project Anda akan melihat folder boilerplate HTML5 langsung di bawah itu, dari mana kita akan meminjam beberapa file untuk proyek kami:
 BoilerPlate

Membuat Page subscribe.html 
Halaman sign up disebut subscribe.html. Kita bisa pergi melalui File => item menu baru untuk membuat sebuah halaman HTML kosong dari template, tapi tidak perlu, karena kerangka boilerplate sudah berisi halaman index.html sangat berguna.

Dalam Explorer panel Project, drag file index.html ke  root folder
Project Anda dan nama ke subscribe.html dengan mengklik kanan file tersebut dan memilih Rename dari context menu. Anda juga harus menyeret folder CSS dan JS ke akar seperti yang direferensikan oleh file index.html. Saya melakukan beberapa pembersihan yang terakhir dengan memindahkan file jquery-1.5.1.min.js naik tingkat dan menghapus segala sesuatu yang lain dalam folder js.

Klik dua kali file subscribe.html berganti nama untuk membukanya di editor.
 


Mendefinisikan Editor Properti

Satu hal yang menonjol segera bila Anda membuka file dalam pane Editor adalah bahwa warna cukup radikal. Alih-alih teks hitam khas pada latar belakang putih, warna-warna yang terbalik. Beberapa orang mungkin seperti itu skema warna, saya menemukan sedikit menyedihkan sendiri. Hal ini mudah diatasi dari layar Tema pada Preferences dialog. Untuk sampai ke sana, pilih Window => Preferences dari menu utama dan pergi ke Aptana Studio => Themes in the tree:

 Themes

Ada beberapa tema yang khas hitam putih, termasuk Aptana Studio 2.x, Eclipse, dan Dreamweaver. Warna individu yang berubah juga.

Ada beberapa fitur lain yang saya suka diatur dalam my editor, termasuk "Insert spaces for tabs" dan "Show line numbers". Kedua hal ini dapat ditemukan di "Text Editor" layar. Hal ini dapat diakses melalui General=>Editors=>Text Editors from the tree:

 Text Editor
 Perhatikan bahwa ada beberapa warna didefinisikan dalam daftar "Appearance color options" di bagian bawah. Mereka hanya mempengaruhi tampilan umum & nuansa editor sendiri dan bukan dari kode.


 Menggunakan Server Anda untuk Previews

Seperti disebutkan sebelumnya, kita perlu untuk melihat halaman subscribe.html kami pada server yang mendukung PHP. Berikut adalah cara untuk melakukan itu.

Klik kanan NewsletterSubscription project di Explorer panel Project dan pilih Properties di bagian bawah context menu. Itu akan memunculkan dialog untuk pengaturan properti yang berlaku untuk proyek tertentu.

Pilih "Preview Settings" dari pohon kiri dan memilih "Gunakan server tertentu" tombol radio. Tentu saja, tidak ada server dalam daftar karena kami belum didefinisikan belum. Klik tombol "New" tombol di kanan untuk melakukan itu.

Pada "Choose server type" dialog, pilih "Simple Web Server" (satu-satunya item dalam daftar), dan klik "OK".

The "Edit Eksternal Web Server Konfigurasi" dialog adalah di mana kita dapat memasukkan keterangan tentang server web kita. Ia memiliki tiga bidang yang harus diisi sebagai berikut:

  • Name: Ini adalah nama yang akan muncul dalam daftar server web eksternal, sehingga memberikan nama apapun yang akan membantu Anda untuk membedakannya dari server lain yang Anda mungkin ingin menggunakan, misalnya, satu untuk Perl, atau Java "WampServer"
  •  Base URL: Web path ke akar dokumen server. Hal ini sangat penting karena Aptana akan menambahkan folder proyek (s) dan nama halaman ke jalan inimungkin memerlukan IP atau nama domain serta nomor port, seperti "http://127.0.0.1:8080". Jika ragu, tetap dengan localhost seperti dalam "http://localhost".
  • Dokumen Root: absolut untuk server's document root. Gunakan tombol Browse untuk mencari di hard drive. Pada Windows, hal itu akan terlihat seperti "C: Program Fileswampwww", meskipun jalan yang tepat tergantung pada apa server yang Anda gunakan dan di mana Anda menginstal itu: 

External Web Server


Coding the Subscribe Page

Satu hal baik tentang boilerplate HTML template adalah bahwa ia menangani pemuatan jQuery dan perpustakaan modernisasi untuk Anda. Kita tidak perlu yang terakhir di sini, jadi kita dapat menghapus referensi untuk itu. Berikut adalah HTML markup lengkap, tidak termasuk JavaScript yang mengirimkan isi form ke server (kita akan mendapatkan dengan yang di bagian 2):

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Newsletter Subscription Page</title>

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">
</head>

<body>

  <div id="container">
    <header>
  Newsletter Subscription Page
    </header>
    <br>
    <br>
    <div id="main" role="main">
  <form id="subscribe">
   <input id="email" type="text" class="input_bg" placeholder="Add your e-mail address" />
   <button type="submit" class="button">Submit</button>
  </form>
    </div>
    <footer>
     <div id="result" style="display: none"></div>
    </footer>
  </div> <!--! end of #container -->

  <!-- JavaScript at the bottom for fast page loading -->
  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/jquery-1.5.1.min.js'>x3C/script>")</script>
</body>
</html>
 
 

Kesimpulan

Bagian 2 dari tutorial ini akan mencakup kode JavaScript, file PHP, serta menyiapkan Konfigurasi Runtime dan Setelan Pratinjau.

0 komentar:

AddThis

close
*** ***