# 好書客 首頁（前端）

設計稿：[線上看設計稿與規格](https://wireframepro.mockflow.com/view/Mff84cd85f3c7975e0bbb626e8cafd5ae1532503672412#/page/b1289da0c2ab4553b3c51f2a10352b02)

Tips: **線上設計稿的右方有一個 SPECS 頁籤，點擊 SPECS 後再到設計稿上挑選組件，可以檢視每個組件的 CSS 規格。**

# 操作流程

#### 熱門書籍列表
- 進入【首頁】
- 自動載入熱門書籍

#### 搜尋書籍
- 點選【搜尋放大鏡】
- 檢查搜尋框是否為空值
- 送出「搜尋書籍表單」


## UI 邏輯
- 點擊搜尋按鈕框，將「搜尋表單」送至 base\_url() + book/search
- Controller: Book->search
- View: book/search\_result
- 載入頁面時，發送 Ajax 至 base\_url() + book/ajax\_hot\_books 撈取最熱門 15 筆資料
- Controller：Book->ajax\_hot\_books()
- 收到 Ajax 取到的資料後，將書籍資料渲染在頁面中。

## UI 控件用途說明

搜尋表單欄位：

## 素材區：
Banner: