JavaScript >> Javascript 文檔 >  >> jQuery

使用 PHP、MySQL 和 jQuery Mobile 構建網站,第 1 部分

在這個由兩部分組成的教程中,我們將使用模型-視圖-控制器 (MVC) 模式使用 PHP 和 MySQL 構建一個簡單的網站。最後,在 jQuery Mobile 框架的幫助下,我們將把它變成一個觸控友好的移動網站,可以在任何設備和屏幕尺寸上運行。

在第一部分中,我們專注於後端,討論數據庫和 MVC 組織。在第二部分,我們正在編寫視圖並集成 jQuery Mobile。

文件結構

由於我們將實現 MVC 模式(實際上是編寫一個簡單的微框架),因此很自然地將我們的站點結構拆分為模型、視圖和控制器的不同文件夾。不要讓文件的數量嚇到你——雖然我們使用的文件很多,但代碼簡潔易懂。

數據庫架構

我們的簡單應用程序使用兩種類型的資源 - 類別和產品。這些都有自己的表格 - jqm_categories , 和 jqm_products .每個產品都有一個類別字段,將其分配給一個類別。

類別表有一個 ID 字段,名稱 和一個包含 列,顯示每個類別中有多少產品。

產品表有一個名稱 , 製造商 , 價格 和一個類別 場地。後者保存產品添加到的類別的 ID。

模型

我們應用程序中的模型將處理與數據庫的通信。我們的應用程序中有兩種類型的資源 - 產品類別 .模型將公開一個易於使用的方法 - find() 它將在後台查詢數據庫並返回一個包含對象的數組。

在開始處理模型之前,我們需要建立一個數據庫連接。我使用的是 PHP PDO 類,這意味著如果需要,可以很容易地使用與 MySQL 不同的數據庫。

包括/connect.php

/*
    This file creates a new MySQL connection using the PDO class.
    The login details are taken from includes/config.php.
*/

try {
    $db = new PDO(
        "mysql:host=$db_host;dbname=$db_name;charset=UTF8",
        $db_user,
        $db_pass
    );

    $db->query("SET NAMES 'utf8'");
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
    error_log($e->getMessage());
    die("A database error was encountered");
}

這將把 $db 全局範圍內的連接對象,我們將在模型中使用它。你可以在下面看到它們。

包括/models/category.model.php

class Category{

    /*
        The find static method selects categories
        from the database and returns them as
        an array of Category objects.
    */

    public static function find($arr = array()){
        global $db;

        if(empty($arr)){
            $st = $db->prepare("SELECT * FROM jqm_categories");
        }
        else if($arr['id']){
            $st = $db->prepare("SELECT * FROM jqm_categories WHERE id=:id");
        }
        else{
            throw new Exception("Unsupported property!");
        }

                // This will execute the query, binding the $arr values as query parameters
        $st->execute($arr);

        // Returns an array of Category objects:
        return $st->fetchAll(PDO::FETCH_CLASS, "Category");
    }
}

兩種模型都是簡單的類定義,只有一個靜態方法 - find() .在上面的片段中,該方法以一個可選數組作為參數,並以預處理語句的形式執行不同的查詢。

在返迴聲明中,我們使用 fetchAll 方法向它傳遞 PDO::FETCH_CLASS 持續的。這樣做的目的是遍歷所有結果行,並創建 Category 類的新對象。每行的列將作為公共屬性添加到對像中。

產品模型也是如此 :

包括/models/product.model.php

class Product{

    // The find static method returns an array
    // with Product objects from the database.

    public static function find($arr){
        global $db;

        if($arr['id']){
            $st = $db->prepare("SELECT * FROM jqm_products WHERE id=:id");
        }
        else if($arr['category']){
            $st = $db->prepare("SELECT * FROM jqm_products WHERE category = :category");
        }
        else{
            throw new Exception("Unsupported property!");
        }

        $st->execute($arr);

        return $st->fetchAll(PDO::FETCH_CLASS, "Product");
    }
}

兩個 find 方法的返回值都是包含類實例的數組。我們可能會在 find 方法中返回一個通用對像數組(或數組數組),但是創建特定實例將允許我們使用視圖文件夾中的適當模板(以下劃線開頭的模板)自動設置每個對象的樣式.我們將在教程的下一部分再次討論這個問題。

好了,現在我們有了兩個模型,讓我們繼續使用控制器。

控制器

控制器使用 find() 模型的方法來獲取數據,並呈現適當的視圖。我們的應用程序中有兩個控制器 - 一個用於 主頁 ,另一個用於類別頁面 .

包括/controllers/home.controller.php

/* This controller renders the home page */

class HomeController{
    public function handleRequest(){

        // Select all the categories:
        $content = Category::find();

        render('home',array(
            'title'     => 'Welcome to our computer store',
            'content'   => $content
        ));
    }
}

每個控制器定義一個 handleRequest() 方法。訪問特定 URL 時調用此方法。當我們討論 index.php 時,我們稍後會回到這個 .

HomeController 的情況下 , handleRequest() 只需使用模型的 find() 方法選擇所有類別,並呈現主視圖(includes/views/home.php ) 使用我們的渲染 輔助函數(包括/helpers.php ),傳遞標題和選定的類別。 CategoryController 中的事情有點複雜 :

包括/控制器/category.controller.php

/* This controller renders the category pages */

class CategoryController{
    public function handleRequest(){
        $cat = Category::find(array('id'=>$_GET['category']));

        if(empty($cat)){
            throw new Exception("There is no such category!");
        }

        // Fetch all the categories:
        $categories = Category::find();

        // Fetch all the products in this category:
        $products = Product::find(array('category'=>$_GET['category']));

        // $categories and $products are both arrays with objects

        render('category',array(
            'title'         => 'Browsing '.$cat[0]->name,
            'categories'    => $categories,
            'products'      => $products
        ));
    }
}

這個控制器做的第一件事是通過 id 選擇類別(它作為 URL 的一部分傳遞)。如果一切按計劃進行,它會獲取類別列表以及與當前類別相關的產品列表。最後,渲染類別視圖。

現在讓我們通過檢查 index.php 來看看所有這些是如何協同工作的 :

index.php

/*
    This is the index file of our simple website.
    It routes requests to the appropriate controllers
*/

require_once "includes/main.php";

try {

    if($_GET['category']){
        $c = new CategoryController();
    }
    else if(empty($_GET)){
        $c = new HomeController();
    }
    else throw new Exception('Wrong page!');

    $c->handleRequest();
}
catch(Exception $e) {
    // Display the error page using the "render()" helper function:
    render('error',array('message'=>$e->getMessage()));
}

這是對新請求調用的第一個文件。取決於 $_GET 參數,它創建一個新的控制器對象並執行它的 handleRequest() 方法。如果應用程序中的任何地方出現問題,都會生成一個異常,該異常將找到它的方式到達 catch 子句,然後在錯誤模板中。

還有一點值得注意,就是這個文件的第一行,我們需要 main.php .你可以在下面看到它:

main.php

/*
    This is the main include file.
    It is only used in index.php and keeps it much cleaner.
*/

require_once "includes/config.php";
require_once "includes/connect.php";
require_once "includes/helpers.php";
require_once "includes/models/product.model.php";
require_once "includes/models/category.model.php";
require_once "includes/controllers/home.controller.php";
require_once "includes/controllers/category.controller.php";

// This will allow the browser to cache the pages of the store.

header('Cache-Control: max-age=3600, public');
header('Pragma: cache');
header("Last-Modified: ".gmdate("D, d M Y H:i:s",time())." GMT");
header("Expires: ".gmdate("D, d M Y H:i:s",time()+3600)." GMT");

該文件包含 require_once 所有模型、控制器和幫助文件的聲明。它還定義了一些頭文件以在瀏覽器中啟用緩存(PHP 默認禁用緩存),從而加快 jQuery 移動框架的性能。

繼續第 2 部分

至此,教程的第一部分就完成了!繼續第 2 部分,我們將在其中編寫視圖並合併 jQuery Mobile。歡迎在下方評論區分享你的想法和建議。


Tutorial JavaScript 教程
  1. NodeJs 的最小授權策略構建器

  2. 我如何使用 AWS Amplify、GraphQL API 構建全棧 Reactjs 應用程序

  3. 熟悉 JS 數組:初學者練習

  4. 語言中的變量

  5. 使用 chart.js 庫可視化數據(教程)

  6. JavaScript 在 | 之後插入附加元素示例

  7. 10 個 jQuery 頁面剝離插件

  1. 使用 Node.JS 和 Twilio 播放電話中的壞名言⚗️

  2. 用 Obsidian 和 Gatsby 創建一個 DIY 數字花園

  3. 我可以用 Jasmine 測試 setInterval 嗎?

  4. 在 JavaScript 中使用 Break、Continue 和 Return 進行邏輯導航。

  5. 如何從子組合組件 React 中獲取父道具

  6. 介紹 JavaScript 對象

  7. [COVID-19] 給老人的短信

  1. 安裝 Tailwind CSS 的最簡單方法

  2. 使用 Gridsome 啟動您的個人寫作網站

  3. 使用 React 從 JSON 自動生成表單

  4. 為什麼你應該使用 React.js 進行 Web 開發