sondmk header
คู่มือการทำโปรเจ็ค 2560

เว็บไซต์สำหรับเรียนรู้ (แนะนำ)

Post by Goborijung at 2018-10-11 00:00:00

https://www.w3schools.com/
https://www.w3schools.com/bootstrap/default.asp

สิ่งที่ต้องรู้ ในการทำโปรเจ็ค

Post by Goborijung at 2018-10-11 00:00:00

1. Web Application คืออะไร ประกอบไปด้วยอะไรบ้าง

2. การพัฒนาเว็บ ต้องรู้จักอะไรบ้าง

2.1 ระบบฐานข้อมูล เครื่องมือจักการฐานข้อมูล
- ฐานข้อมูล Mysql ชื่อฐานข้อมูลคือ MySQL
- โปรแกรม Mysql Workbense
- ชุดจัดการฐานข้อมูล PhPMyAdmin

2.2 โปรแกรมประมวลผล Client. และ Server
- Apache Server เว็บเซอร์ฟเวอร์ชื่อ Apache
- เว็บบราวเซอร์

2.3 ภาษาที่ใช้ในการพัฒนาเว็บ
- HTML
- CSS
- Javascript
- PHP
- JQuery
- Bootstraps (Framwork) 

2.4 เครื่องมือในการพัฒนาเว็บ
- Sublime Text
- USBWebserver
- Mysqlworkbense
- Bootstrap. Framwork
- Chrome Browser

ขั้นตอนการสร้าง Website

Post by Goborijung at 2018-12-27 00:00:00

Step 1 เขียนโครงสร้างของ HTML5 
<!DOCTYPE html>
<html>
  <head>
     <meta charset='utf-8'>
     <title>This title</title>
  </head>

  <body>
    This content.
  </body>
</html>

Step 2 เอา CDN ของ Bootstraps มาใส่ข้างล่าง Tag Title
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Step 3 สร้างคลาส Container,row,columns เอาไว้ใน Tag Body 
<div class="container">
  <!-- Header -->
  <div class="row">
    <div class="col-sm-12 text-left">
      <div style="background-color: lightgray;">
       <h1>This Website Header</h1>
      </div>
    </div>
  </div><!--/row-->

  <!-- Content -->
  <div class="row">
    
    <div class="col-sm-2">
      <div style="background-color:lightgray">
          เมนูฝั่งซ้าย
      </div>
    </div>

    <div class="col-sm-8">
       <div style="background-color:lightgray">
          ส่วนเนื้อหาของเว็บไซต์
       </div>
    </div>

    <div class="col-sm-2">
      <div style="background-color:lightgray">
        เมนูฝั่งขวา
      </div>
    </div>
  </div><!---/row->

  <!-- Footer -->
  <div class="row">
     <div class="col-sm-12">
        <div style="background-color:lightgray">
             This Footer
        </div>
     </div>
  </div><!--/Footer-->
</div><!-- /container -->


Framework

Library


เครื่องมือพัฒนาเว็บ



การออกแบบและพัฒนาเว็บไซต์


Download SourceCode



copyAllright © 2016 soundmk.com