少々書評系統 的誕生(喂

書評網站

少々書評系統

….忽然覺得要寫自己「寫網站的過程」忽然有點害羞(?) :oops:

因為我自己覺得這個網站使用的技術啥等等的都不算什麼高深技巧,就像是個練習作品(事實上也是練習作品XD)
我自己的 PHP 算是自學而成(而且老實說是從以前改論壇改部落格慢慢學會的),所以本篇就不強調 PHP 跟 SQL 的語法,算是以介紹我如何把這網站組成XD

所以不要怕!沒有程式內容!該不會有人期待這個吧…..不過我還是會把一些可以參考用的程式網站貼上來XD 只是感覺這篇會很多字沒圖XD””

 

環境架設

首先!當然就是先來架設環境。以我的習慣我會先在自己電腦寫完測試之後才上傳到我的網頁空間去做最後的調整。用自己電腦先測試的好處當然就是比較快,不用等待上傳重load的時間,也不會增加空間的流量。

我的網站空間是 php 的空間,所以要架設的就是apache的環境。

有一個環境的軟體很好用也很多人介紹,XAMPP。它可以一次在你的電腦上建置 Apache + MariaDB + PHP + Perl 的環境,不管是要測試 PHP 或是 Perl 都很好用!而且它也建了資料庫,要轉移到網站空間的時候只要匯出建置語法就可以了,方便!

它有翻譯成繁體中文,使用方法可以直接參考上面的官方網站的教學。我大概從他沒有中文版的時候開始試用,不管php或是要測試Perl的程式都好用!

然後是寫網頁跟php程式的工具,我是用 MAC,就只用了記事本軟體:Smultron。重點是寫的過程會自動幫忙變換顏色的話,會非常方便。

像這樣可以分別語法、變數、註解等等的顏色,很多軟體都可以達成,用自己習慣的就好!

功能規劃

功能規劃通常沒辦法一次到位,只要寫程式的人大概都會明白(?)。但有先做這一步,後續就直接照著規劃一個一個寫出來就可以了!

所以這階段是先把主要的功能寫下來,然後再開始,以我的狀況,我是習慣用手寫的,塗塗改改中可以想到更多XD

這是我自己的行程表,但其實算是少了最初的功能表,因為那張不見了XDDD

後續想要新增的,上面是我對版面的構想

通常都是先想想對這個網站想要有怎樣的功能,再去做規劃比較快。
我基本上就是想要一個網站 (1) 能夠放我看過的小說簡介 (2) 存我自己的評論、評分 (3) 有tag功能 (4) 可以讓別人的評論也存起來,可以收集看別人的感想。
我對這個功能的規劃如下(沒圖只好用列表的XD)
  1. 登入功能
    • 登入驗證、Cookie、忘記密碼功能
    • 後台通過
  2. 自建書本資訊:只有註冊者可以使用
    • 功能:新建 / 修改,沒有刪除是因為怕別人誤刪,所以就只有管理員可以刪。
    • 內容:基本資料顯示,但又不要太多(一多就沒人想要輸入了XD)
      • 作者利用提示、標籤利用這種效果來簡化輸入
  3. 評論:[新增] 只有註冊者可以使用。所有人:觀看評論、點擊評論者可以看他所有評論小說清單
    • 評分
      • 用星級評分
      • 書本資訊要顯示平均評分
    • 標籤:需記錄每個人設定的標籤,書本顯示的時候不重複顯示
    • 想看、已看過
      • 新增評論時自動加入「已看過」清單、不發評論可手動加入
      • 可以點擊「想看」做需求清單
  4. 類別:只有管理者可以增加,點擊顯示該類所有小說資訊。單一。
  5. 標籤、作者列表:統計前20名顯示於首頁,但可顯示全部並顯示筆數
  6. 搜尋、排列
    • 搜尋功能:提供書名跟作者
    • 排列:預設是小說建置時間,可根據選擇變換排列順序
  7. 分頁:可跳頁
  8. 個人功能:只有註冊者可以使用
    • 記錄自己發表的評論
    • 已看過小說清單
    • 想看的小說清單

這個其實已經算是最後定稿,從一開始先列出自己需求的,再慢慢開始增加內容,有一些都是在噗浪上(12)收集來的,大部分都有做到(應該吧XD)

這些功能大概使用者只要點點點,但程式要寫不少。不過因為系統就是想要人使用,最好就是:輸入能少就少但必要資訊有就可以,直覺使用比較重要(雖然很難寫QDQ)

版面、檔案規劃

把這兩個放一起講是因為規劃好功能之後就是要寫出來,那,版面要長怎樣?要不要做RWD?用IFRAME?程式檔案跟HTML要不要分開?共用的功能另外寫?

我能力不足沒去研究php模版的寫法,所以其實兩個是混在一起的(艸)才會兩個需要一起考慮。

這些其實也是一開始就規劃好,動手寫的時候才不會寫到一半後悔要重寫的時候痛苦。雖然也是滿常發生的啦…..

版面規劃

以前寫網站不怎麼需要考慮這個,當年只要顧好電腦版顯示的樣子就好。現在就不是了,手機這麼發達,螢幕也不小,越來越多人都是用手機在看部落格文章,所以 RWD (響應式網頁設計)就變成必然的趨勢。

要如何製作RWD的網站呢?現在有很多網路上的JS,比如 Bootstrap、Semantic UI等等。利用已經設定好的 CSS 跟 JS Event,方便讓你在製作網站的時候不用自己硬刻,自動符合各種大小的瀏覽器的排版。

工作上其實 Bootstrap跟Semantic都有接觸過(就有碰過,但實際上使用的是我們勞苦功高的設計師~),使用上因為全英文說明雖然不是看不懂,但你知道的(???) 8)  這次要做的也是自己想要的網站,實在是不想要花太多心力(喂),所以我就去搜尋看有沒有全中文的,結果被我找到 Amaze UI。中國的作品,滿有趣的,內建的 icon 樣式我喜歡,所以就先決定這個了。

決定好 UI 的工具之後,接下來就是排版了。我自己的習慣是,先把電腦版的樣式決定好之後,再來決定手機版的樣式。畢竟主要測試,還有我主要使用還是會用電腦操作,手機是希望能夠在任何地方都可以看看別人的評論或是自己過去的評論。

電腦版整體版面構想

主要版面的文章區塊的樣式構想

小說詳情的版面構想

手機版的版面

我還滿喜歡用 ppt 畫這種圖的(需要做報告的話)乾淨簡單 :-D 

我覺得先畫這種圖出來很有用,不管是後續檔案的切割或是排版或是程式的動手寫,看著圖一塊一塊完成,一來是很有進度感,另一個就是知道自己要做的區塊跟哪些其他區塊有連結。

還有一種是下面這種,就是除了版面構想之外,還多加上動作。也可以當程式的流程圖,寫程式的時候很有幫助!(字醜)

簡易的版面動作圖

檔案規劃

檔案的規劃這個我算是決定好上面之後開始的。就如同一開始說的,因為我沒有真的實際讓版面跟程式分開,就跟我程式的檔案分布是一樣的。

從上面的版面規劃下,可以知道我有重要的幾個頁面:(1) 主頁 (2) 登入頁面 (3) 文章+評論頁面(瀏覽) (4) 新增、修改小說 (5) 新增、修改評論 (6) 搜尋結果頁面 (7) 列表(作者、標籤)頁面 (8) 列表點擊資訊後頁面

然後列出使用者會看到、使用到的頁面之後,就會發現 (1) (6) (8) 是一樣的畫面 (2) (3) (4) (5) 是不一樣的頁面。但 (3) 跟 (5) 可以重複的部份是「小說資訊」。所有的頁面重複的是上、下的資訊跟右邊的搜尋、類別、作者、標籤區塊。

先從頁面歸類,再把頁面上的內容分塊看重複的有哪些。反覆經過上面的細分之後,你就知道要寫哪些程式跟要怎麼開資料夾放這些東西了。

至於取名字……除非是工作用或是要跟別人一起編輯,不然就是自己開心就好XD

動手!

先來個 PHP 的教學網站,從最簡單的程式邏輯一路到做一個簡單電商網站都有,可以根據自己想要的參考。

因為我實在是不可能把所有的內容寫出來(這等於是寫網站整個語法教學吧XD 但我自己知道自學得很爛,沒膽量XD),大概分一下我主要做了什麼。

從上面的檔案規劃後,我把程式大致分成兩大部分:(1)處理 DataBase 資料  (2)頁面顯示、頁面排版   (我的檔案夾大概也是這樣分)

會重複使用的就一定拉出來成 function 去引用,資訊傳遞用 session,大部分就是用 UI 所帶有的一些 plug-in 去做(比如說評分系統還有自動完成系統)

其實因為也不是第一次從零到有的寫 php 網站,上次寫的時候我的工作主要並不是網頁,現在寫就覺得這幾年的工作還是有差。比如說資料庫存取啊,檔案的調整,使用者會想要什麼功能等等,寫起來雖然不是駕輕就熟,但總是比上次更有架構了一點。

 

只是還是沒有研究模版,下次等我有衝勁要寫新網站的時候再來!XD

內容很短,但因為我真的不清楚要說哪些,就寫些概念過來。如果有特別想要知道哪一塊怎麼做到的,可以在下面留言給我,看適不適合開新的一篇來講XD

如果你覺得這篇文章還不錯,請您花點時間註冊並幫我按下方的Like五下!給我點支持!
您可參考這篇文章:讓你的讚賞成為實質的贊助:LikeCoin
我將得到likecoin的回饋:) 回饋由 (likecoin)基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,流程超快),按五次左鍵,可以贊助我且完全不會花到錢!支持創作,正向交流:)

魚ㄦ

愛好玩新東西的魚。2011年開始接觸 WordPress,但現在還是新人。工作上每天接觸程式語言,生活中接觸各種各樣事情。

記錄生活、創作、喜好、廢。

轉Likecoin贊助我!

寫點留言吧!

avatar
1000

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料