1. 程式人生 > >phpcms網頁替換驗證碼及搜索功能

phpcms網頁替換驗證碼及搜索功能

模板 enable action sys image ora 圖片 ase 使用

在使用phpcms替換網頁的時候,除了正常的替換欄目、內容頁等,其他的什麽驗證碼啦,提交表單了,搜索功能了,這些在替換的時候可能會對一些默認文件有一些小小 的改變

下面就是自己在失敗中成功的過程,最後終於替換成沒有bug的替換。作者:悅~

一、phpcms的驗證碼替換

有驗證碼的地方,一般就是表單了,那麽首先就要先制作表單出來了,表單的制作過程很簡單,如下:

A。制作一張表單出來

(1)登錄自己的phpcms後臺管理

技術分享圖片

(2)登錄進去後,按照這個步驟進行添加表單

  a.模塊------表單向導:如圖

技術分享圖片

  b.打開表單向導後,單擊“添加表單向導”按鈕,如圖:

技術分享圖片

  c.打開對話框進行添加信息,單擊確定

技術分享圖片

  d.確定之後會在這個窗口出現剛添加的自己的表單,如圖:

技術分享圖片

(3)向表單中添加字段

  a.單擊當前頁面中的“添加字段”按鈕,打開添加字段窗口

技術分享圖片

  b.在添加字段窗口中進行添加信息(對窗口中的每一個進行設置,比如字段類型、長度、字段名字等)

技術分享圖片技術分享圖片

  c.單擊“提交”後,這個字段就添加成功了,查看自己添加的所有字段

  單擊“管理字段”就可以查看添加的所有字段信息

技術分享圖片

技術分享圖片

  d.這樣表單就有了,將表單添加到替換的網頁中,只要復制這一句js就可以了,如圖:

復制這句話到網頁中的相應位置就可以了

技術分享圖片

到這裏表單就有了,可以看下表單的樣式,單擊“預覽”按鈕就可以了

(3)修改表單的開頭信息

  正常的添加到網頁後,會出現這麽一個樣式,如圖:

技術分享圖片

  a.打開自己的phpcms模板的默認模板文件夾,如圖

技術分享圖片

  b.打開默認的文件夾,找到“formguide”文件夾中的“show_js.html”文件,打開該文件,如圖:

技術分享圖片 技術分享圖片

  c.在打開的show_js.html文件中,修改這個位置,如圖:

技術分享圖片

這樣的話,表單才是真正的結束了

B。添加驗證碼到表單

  (1)添加一個字段名“驗證碼”,這個步驟上面都有,不詳說

  (2)同樣的在默認的文件夾,找到“formguide”文件夾中的“show_js.html”文件,打開該文件

在這個位置添加這麽一段代碼,如圖:

技術分享圖片

添加的代碼,如下:

1 2 <tr> <th style=" border:0px;"><font color="red">*</font>驗證碼:</th> <td style=" border:0px;"> <input name="code" type="text" id="code" size="10" class="input-text" style="width:492px;"/></td> </tr> <tr><th style=" border:0px;"></th><td style=" border:0px;"><img id=‘code_img‘ onclick=‘this.src=this.src+"&"+Math.random()‘ src=‘{APP_PATH}api.php?op=checkcode&code_len=4&font_size=14&width=110&height=30&font_color=&background=‘ width="201" height="50"> </td></tr>

  (3)默認模板中的文件修改完成後,還需要修改一個地方,那就是改了\modules\formguide下的index.php文件 ,如圖

想要找到這個文件夾,同樣的都是存在phpcms文件夾中

技術分享圖片 技術分享圖片

技術分享圖片

打開文件並且添加這麽一句代碼,添加位置如圖:

技術分享圖片

添加的代碼,如下:

1 $session_storage = ‘session_‘.pc_base::load_config(‘system‘,‘session_storage‘); pc_base::load_sys_class($session_storage);

這樣,驗證碼就完成了,如圖顯示:

技術分享圖片

點擊圖片也是可以修改驗證碼的內容的。

通過不斷的嘗試,這就是完整的替換驗證碼的步驟了~~~~

想要查看用戶提交的表單,可以查看這個地方:

每一個表單的右邊,單擊“信息列表”:

技術分享圖片

進入信息列表就可以查看那些人添加了表單,並且都是提交什麽內容,如圖:

技術分享圖片

技術分享圖片

二、 搜索功能

所謂的全站搜索功能,其實就是根據輸入的內容進行網站搜索。

第一步:搜索頁面的form表單提交書寫,form表單怎麽寫就不多說了。

1 2 3 4 5 6 7 8 <form name="search" id="" action="{APP_PATH}index.php" method="get" style="170px; display:inline-block; float:left"> <h1>產品搜索:</h1><input name="q" value="請輸入查詢關鍵詞" type="text" onclick="javascript:document.getElementById(‘q‘).value=‘‘;" id="q" style="width:186px; height:22px; border-right-width:0px; margin-top:7px;"/><input id="siteid" type="hidden" value="1" name="siteid"><input type="submit" name="submit" id="submit" value="立即搜索" style="width:60px; height:26px; border:0px; <!--文字輸入框--><br>       <input type="hidden" value="search" name="m"> <!--進行搜索的頁面--> <input type="hidden" value="index" name="c"> <!--搜完成功後返回的頁面--> <input type="hidden" value="init" name="a"> <input id="typeid" type="hidden" value="1" name="typeid"> <!--typeid的類型--> </form>

  

這樣就把想要查找的內容傳入index.php文件進行處理(index.php文件在modules/search/index.php)這個php文件就是對上面傳入的各類值進行判斷和處理

如圖所示:

技術分享圖片

第二步:這個form表單返回的頁面

這個返回值的頁面不是欄目頁,也不是列表頁,也不是內容頁,是一個獨立的文件

(1)在你自己的模板之下建立一個search文件夾:路徑如下圖:

技術分享圖片

不是在content文件裏建立,而是它的外面建立search文件夾

(2)search文件夾裏面有這麽幾個文件(自己的返回頁面進行拆分)

將一個整體的靜態頁面像其他的頁面一樣拆分為這麽幾個部分:header、footer、index、list這麽4個頁面文件

技術分享圖片

(3)搜索結果的顯示

拆分就不多說了,知道phpcms的都會拆分,現在就是把index頁面和list頁面進行修改

index頁面是為了搜索沒有內容的時候返回的頁面,這個頁面可以自己設置,也可以使用phpcms的默認頁面。

list頁面就是搜索的結果頁面了,提醒一下:這個頁面中除了要顯示搜索的內容外,其他的內容就不要進行遍歷顯示了,因為這樣會把搜索的結果出錯了,不會顯示搜索的結果。

顯示搜索結果頁面的遍歷代碼如下:(把這個放到想要顯示的位置,樣式根據自己的樣式進行修改)

1 2 3 4 5 6 7 8 9 10 11 12 13 <ul> {loop $data $i $r} {if $r[‘thumb‘]} <!--搜索的結果的圖片--> <li><b><a href="{$r[url]}"><img src="{$r[thumb]}" /></a></b><!--搜索的結果圖片和路徑--> {/if} <h3><a href="{$val[url]}">{$r[title]}</a></h3></li><!--搜索結果的路徑和標題--> {/loop} </ul> {if empty($data)}未找到結果{/if} <!--沒有找到時的提示--> <div id="pager" class="fy"> {$pages} <!--結果的分頁--> </div>

  

註意:可以進去phpcms的默認模板進行查看search的文件夾中的文件怎麽寫的,註意裏面有幾個js文件需要引進,不能不寫。  

1 2 3 4 {if $setting[‘suggestenable‘]} <script type="text/javascript" src="{JS_PATH}jquery.suggest.js"></script> <script type="text/javascript" src="{JS_PATH}search_suggest.js"></script> {/if}

第三步:進行檢驗

查看結果的頁面是否有問題:

(1)搜索站裏面有“氣”的產品

技術分享圖片

(2)查看頁面是不是出來了(東西多的應該是有分頁的,還有搜索的關鍵字進行高亮顯示,這是樣式的修改)

技術分享圖片

到這裏phpcms的全站搜索的替換就結束了。

需要註意的點:

(1)search文件夾是在模板content同一級文件

(2)search文件夾中的文件也是要拆分為“頭、中、下”

(3)拆分的全部文件中除了查找結果之外,其他的內容不能有任何的查找數據庫的遍歷

phpcms網頁替換驗證碼及搜索功能