# Stan 週活動紀錄 #### tags: `活動紀錄` --- *[網域管理平台]:GoDaddy *[waf]:防火牆 *[HTTP Strict Transport Security (HSTS) Policy Not Enabled]:未設定 HTTP 嚴格傳輸安全 ## ==20241008== 靜態網頁加載tailwindcss套件方式: - 前言 目前靜態網頁我們都是使用cdn的方是引入tailwindcss套件,但是這樣的話在我們利用zap弱點掃描的時候就會被掃到CSP中風險,所以為了要修復這樣的風險,我跟Stanely討論並研究說將tailwindcss直接安裝進靜態網站內,這樣就可以解決這個中風險。 - 步驟一 在專案的terminal上 利用tailwindcss網站上的Tailwind CLI安裝指令 ``` npm install -D tailwindcss npx tailwindcss init ``` - 步驟二 建立一個css檔案 並且命名為styles,在這個css檔案內加入下面文字,並且在tailwind.config.js編寫自定義的css名稱,並且要記得在檔案中的content內加上 './*.html' ``` @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` - 步驟三 一樣在terminal打上下面的指令,並按照你的styles在哪個位置修改指令,他會生成一個output.css檔案,再將檔案放入你放css資料夾內,完成後就可以把資料夾內因為安裝的node_modules做刪除了 ``` npx tailwindcss build css/styles.css -o output.css ``` -最後,將你所需要tailwindcss的html檔案上面引入output.css檔案就可以讓你的tailwindcss順利啟用了。 注意!! 要記得確定tailwind.config.js是否有把自定義的css編寫完成才能進行步驟三喔!!,不然就會每次一修改後就要跑一次步驟三,且node_modules也不能刪除。 建議可以先利用cdn的方式製作網頁,然後在打包前利用上面步驟將tailwindcss安裝進來,這樣會減少重複的步驟三 ## ==20240717== 目前在準備弱點掃描需要教學的資料及專案維護部分,還有研究excel匯出是否可以匯出單一筆內有多的商品明細可以向下排列,目前有實現的狀態式利用JS的xlsx套件+上php 製作而成,具體的PHP寫法如下: ```php= $order = Order::with('orderDetails')->get(); $data = []; foreach ($order as $item) { $baseOrderData = [ '姓名' => $item->recipient_name, '電話' => $item->recipient_phone, ... ]; // 把訂單資訊array加入第一筆商品資訊 $firstDetail = $item->orderDetails->first(); if ($firstDetail) { $firstOrderDetailData = array_merge($baseOrderData, [ '商品名稱' => $firstDetail->product_name, '商品單價' => $firstDetail->price . '元', '商品數量' => $firstDetail->qty . '份', '商品總金額' => $firstDetail->price * $firstDetail->qty, ]); $data[] = $firstOrderDetailData; //拿掉已經加入的第一筆商品資訊 $item->orderDetails->shift(); } // 再把剩下的這筆訂單的商品資訊加進來,但不要有前面的訂單資訊 foreach ($item->orderDetails as $detail) { $orderDetailData = [ '商品名稱' => $detail->product_name, '商品單價' => $detail->price . '元', '商品數量' => $detail->qty . '份', '商品總金額' => $detail->price * $detail->qty, ]; $data[] = $orderDetailData; } ``` 製作好後就會出現我們要的效果並依照xlsx套件的製作就可以做出想要的效果,如下圖:![image](https://hackmd.io/_uploads/rygvXpNOR.png) 把同一個訂單類的商品資訊都印出來並且不需要再帶前面的訂單資訊。 ## ==20240703== 幫忙Stanley製作學生會專案收合功能,並且在點擊儲存後會檢視必填欄位是否有填寫資料,如果沒有則會focus過去,製作好後因為我使用的是setTimeout製作,但因為每個瀏覽器及電腦運作速度關系,使用setTimeout會出現在各個電腦的時間差不一樣,所以Stanley做了調整利用nextTick去製作,然後我就去找相關資訊去知道這個nextTick的運作,它的運作方式是在下次DOM更新延遲回調,在改動之後再持行函式,他也能與 async await 、Promise 混合使用。[相關連結](https://vue3js.cn/global/nextTick.html)這樣的寫法可以避免上面瀏覽器及電腦運作速度出現的時間差。 ## ==20240626== 博物館不需要投票功能,目前正在移植進嘉義專案內。 在嘉義專案發現一開始流程規劃的問題,沒有判斷報名方是要報名哪一個類別的投稿,所以整個流程再重新整合了一遍,並且對城市上進行檢查是否有BUG,整合過程中是比較繁瑣的,因為系統必須是按照需求作開發,但一開始的流程就少了這一塊功能,所以要更動的地方相對的多,而且有些位置改動後還必須與先前的串上來,注意的點就比較多,所幸是在這禮拜就完成修改項,剩餘的是後台呈現頁面、入圍作品的處置、入圍作品的投票及分類。 ## ==20240619== - 專案部分,因為專案需求一開始還需要要google第三方登入,但後續需求有改,不需要google登入,但因為已經開始研究了,所以還是寫下紀錄。 跟line一樣[Socialite Providers](https://socialiteproviders.com/)套件去處理這邊登入,google的申請第三方接口相較於line較為繁瑣[參考網址](https://www.tsg.com.tw/blog-detail2-162-0-google-login.htm),只要依照上面步驟去填寫就可以完成google第三方建立並且取得用戶端ID及用戶端密碼。 一樣要注意的就是不能在本地端測試。 ## ==20240612== - 專案部分,這禮拜研究第三方登入,依照這樣的功能放進投票系統。 因為專案是使用laravel架設,所以可以使用[Socialite Providers](https://socialiteproviders.com/)套件去處理專案接收第三方的資料![image](https://hackmd.io/_uploads/SJsYh-lD0.png) 這張圖片是如何加入line第三方登入,的功能寫入laravel專案內,接下來就是要測試,但因為對方沒有給予,我先自己處理個測試[line](https://developers.line.biz/en/)第三方,在這邊可以利用email去創建商業性質帳號,這樣就可以[依照這個網頁](https://www.tsg.com.tw/blog-detail2-160-0-line-login.htm)建立第三方所需的資料,所需要的有Channel ID跟Channel secret這兩個,以及要確定OpenID Connect有設定好 ![image](https://hackmd.io/_uploads/ry1fAZeD0.png) 及第二頁的LINE Login的Callback URL 的設定 ![image](https://hackmd.io/_uploads/ryFERbgDC.png) 這樣基本就可以進行第三方登入測試。 需要注意的是,測試需要在測試站進行測試,本地站沒有辦法進行測試。 ## ==20240605== 昨天再利用github desktop上傳程式碼的時候遇到了這個問題, 經Stanley解說是因為github desktop 更新出現的漏洞。 ![image](https://hackmd.io/_uploads/rJdwQa3NC.png) 目前只能用terminal打git指令做到上傳動作 - 花專案的部分,最近做完那三個專案後,因為有用到join去拿取資料重組成一份新資料,所以想到說之前在花專案的時候有用過join,然後就回去檢查了一下,發現之前的寫法抓取太多不必要的欄位導致她運行的時候花比較多時間去拿取資料,最原先的寫法是這樣 ```php $orderInfo = OrderInfo:: join('users', 'order_infos.user_id', '=', 'users.id') ->join('members', 'order_infos.user_id', '=', 'members.user_id') ->select('users.name', 'users.email', 'order_infos.*','members.short_name') ->where('type', 1); ``` 這樣的寫法中裡面的order_infos.* 是拿取order_infos資料表的所有欄位,但是我發現說當時顯示欄位並不需要全部拿取,所以我簡化了一些欄位掉,讓原本拿出37個欄位改成只拿取13個欄位,修改後如下: ``` php $orderInfo = OrderInfo::select('users.name', 'users.email', 'order_infos.id','order_infos.receiver_country_id', 'order_infos.order_number', 'order_infos.date','order_infos.quarantine_date', 'order_infos.shipping_date','order_infos.salesperson_id','order_infos.state' ,'order_infos.updated_at','order_infos.receiver','order_infos.receiver_phone', 'order_infos.receiver_address','order_infos.order_note_backstage', 'members.short_name') ->where('type', 1) ->join('users', 'order_infos.user_id', '=', 'users.id') ->join('members', 'order_infos.user_id', '=', 'members.user_id'); ``` 這樣整整減掉了一堆欄位,頁面的顯示也變得會比較快一點。 雖然說第一種寫法寫的會相對來的少,但是資料一多時就會出現頁面反應時間暴增的情況。 ## ==20240529== - 這禮拜在執行目前三個專案的修正,以及加入excel功能,目前故宮以及雲林以正在使用,然後excel匯出部分,因為需要圖片匯出,所以有使用laravel-excel套件,結果因為太久沒有使用,就忘了說要把xampp的php.ini裡面的一個設定打開,導致套件無法加載進去。 - 使用[laravel-excel](https://docs.laravel-excel.com/3.1/getting-started/installation.html),先到官網看如何安裝, 然後要記得對於自己的xampp ![image](https://hackmd.io/_uploads/BJ0IFb44C.png) ### 這邊的php.ini 點開來搜尋 extension=gd ![image](https://hackmd.io/_uploads/ry45Y-EV0.png) 把它前面的分號拿掉就可以安裝了 接下來,利用他的指令```composer require maatwebsite/excel```去執行,那為什麼不用3.1版本呢? 因為官網這邊有做說明 ![image](https://hackmd.io/_uploads/HkVOu-EEC.png) 這邊是說如果安裝3.1出現問題的時候可以先嘗試最原始版本,我這邊初步理解是php的版本他沒辦法安裝。 然後要記得跟其他人說你有安裝這個laravel-excel所以你的xampp要做修改才能composer install 。 ## ==20240522== - 小部分享 筆電升級為MAC AIR,目前在摸索如何在OS環境下開發專案 1.homebrew、XAMPP、node、composer以及資料庫都安裝完畢 2.資料庫部分目前在摸索怎麼使用 3.熟悉在OS環境下製作專案 目前使用心得: 光是電池部分就超有感覺,然後在操作上應該是我還不知道哪些指令可以加快我的動作,這部分還要再熟悉手勢跟快捷,有發現到如果全螢幕的話她會有另開一視窗的做法,應該是要你關注點一致的做法,跟window的方式不太一樣。 ==專案部分== - 故宮部分,一開始在製作時,沒有問清楚流程及思考流程上會不會出錯,就直接做下去,導致花了很多時間在後續修正使用者體驗,這部分我會再加強這部分,多想一點。 - 雲林的部分,一直有遇到就是useAlart他會閃跳這部分,且不同電腦會有不一樣的結果,有的不會出現這樣的問題,目前也在思考這是什麼問題。 ## ==20240410== ==專案部分== - 球隊專案部分,目前已全部都修改完畢,剩餘是後台的修改多圖上傳,前台的過度動畫順序調整,目前已經是可以交付的狀態了,這次專案修改的部分時間有點久,不管是修改項或是新增,也是自己對於vue沒有太過熟悉,這部分我會再精進自己對於vue的熟悉。 - 風險修正部分,這幾天在修改農業專案的風險,他是以IIS方式架設,出現使用棄用的TLS進行聯網或是串接,而在前幾年IIS上部分的TLS已經棄用,所以這邊是要讓網站不用舊的TLS,一開始我是用修改登陸程式的方向去處理這件事情 ![image](https://hackmd.io/_uploads/BJs3gdXlC.png),但是卻沒辦法完全弄好,對方有提出說用[IIS Crypto](https://hackmd.io/@Not/rJ52Vrp_v)這個程式去處理,超好處理的,圖形化介面超爽DER,只要勾一勾,點擊確定重開機,就完成了,舒舒服服,然後第二的風險是**HTTP Strict Transport Security (HSTS) Policy Not Enabled**他的修改部分是,在IIS的管理頁面上加入跳轉標頭![image](https://hackmd.io/_uploads/B18zQdmx0.png) ![image](https://hackmd.io/_uploads/HJsMXu7eC.png) 這樣就可以解決了,目前我只處理過xampp架設的跟IIS架設的風險維護,感覺上IIS架設修改風險在他的那個輔助程式上的處理相較於XAMPP上好處理,但不排除還沒遇過更難的風險維護QAQ ## ==20240403== ==教學部分== - 興大各小組目前進行到後端處理資料及建置資料庫,還有進入到業務邏輯方面,這邊就有發現有些同學對於邏輯思考及功能模擬建構部分還有待加強,又或是因為我碰過相關的邏輯,所以在面對同學邏輯上的問題時,可以有效地把它理順並且跟學生說明。 - 在這次教學部分,有發現說之前雖然會用Stanely所寫的套件及功能,卻沒有真正去了解原理,在這次待組隊的經驗中,再一次去複習並且講解給學生聽,只是覺得自己那些套件功能還沒完全熟悉QAQ ==專案部分== - 球隊部分,目前前台再修改小細項,後台部分已經完成,只有一個是一開始沒有提出的功能,這部分會是之後網站上架後再處理,在修改前台小細項的時候,看到有些編寫的程式碼,跟我自己在編寫的習慣部太一樣,他CSS樣式也些寫在頁面有些寫在全域有些寫在html上面,這樣在修改上要找很多地方,然後有些css的寫法可以利用更簡單、更好修改的方式去編寫,但是實際情況卻是用直覺快速完成的CSS處理,這是我覺得最不一樣的地方。 ## ==202403277== ==教學部分== - 各小組的部分都把前台的頁面利用假資料處理好了,也開始建立資料表及models,再看看這禮拜過去看看同學缺少些甚麼,再進行補充,另外在這禮拜也要開始架設它們的網站出來了 ==專案部分== - 球隊專案部分,後台及資料庫已完成,目前在接手前台的資料傳遞及頁面修整部分,在這次製作專案過程中,發現在vue的使用上跟後台串接的部分還是沒有到很熟悉,即使知道Components的使用,但是在使用上卻還是會有些地方沒注意到或是接入時缺少了專用的變數之類的,這部分就是下次在製作時要先看清楚它的運作流程,然後在利用他,達成快速且沒有bug的專案。 ## ==20240320== ==教學部分== - 目前教學部分,教學如何在專案內建置資料庫關聯及資料庫的編寫,還是有發現他們在寫資料庫的時候,資料庫名稱沒有加s、預設的資料欄位刪除(新增時間跟更新時間)、還有人欄位設定為中文,看了覺得蠻無語的,雖然說不行但是不太會有人這樣設定,而且沒加S跟新增時間跟更新時間刪除會被專案預設的function擋下來沒辦法做新增編輯,甚至連seeder也沒辦法存入,所以該是時候給學生搞一下,讓它們碰一下。 ==專案部分== - 球隊專案部分,目前後台都建置完成,在弄細小的修改,以及前台可能需要增加的資料欄位,還有API的判斷製作,這次接API發現,不是每個API都那麼舒服有唯一值可以判別,賽程表部分它的唯一值不見了,所以需要多一個判斷方式去做判別。 ## ==20240313== ==教學部分== - 目前教學部分已進入到後端,我這邊的進度是在建置專案及資料庫部分,在教學關聯的時候,對於一對一、一對多、多對多的比喻比較不好跟學生溝通,因為都是從實務上學習,也沒有去理解說為何這邊要拆表,所以這部分,我是以店家商品為情境去帶同學了解關聯,只是這部分我還需要再多想一下怎麼去跟學生說明。 ==專案部分== - 球隊專案部分,這次我負責的事後台頁面的生成及新刪修讀的部分,第一次自己建立資料庫及後台頁面生成,總覺得怕怕的,但還好是都有建立完成,目前剩下三個後台所需要的管理頁面還沒完成,預計會是在下禮拜五前把後台製作好,僅需要再修改些地方。 ## ==20240306== ==教學部分== - 這幾個禮拜的教學,發現自己對於熟悉的程式語言,其實只是會使用的階段,卻沒有到完全理解的狀態,以至於在對學生做講解時,沒辦法徹底讓對方知道為什麼要這樣用,而且也發現我自己的語氣部分,在講課跟平常狀態有差別,讓學生會覺得想睡覺吧(?,還有就是設備問題,雖然不是我的問題,但我也沒有在去做複查這件事,所以之後在使用類似的設備時,自己要多點心眼看一下狀況。 ==專案部分== - 目前接到要做球隊官方網站的專案,進度目前是在建置專案及建立資料庫,算是第一次建立資料庫。 - 舊專案修改部分,目前都是全部修完了,然後上次口罩專案部分,因為它們的專案被注入攻擊,導致對方的網域遭到google判定為釣魚網站,經過Stanley、Never的提示才發現說是正式站的主機被注入了,修改完後因為對方的網域還是被判定為釣魚網站,為了要知道是否有修正完,我請Never幫我在公司的測試站網域開一個網址對應過去查看,結果因為這樣的操作,導致我們的測試站網域也被判定為釣魚網站,最後是利用Stanley提供的google Search去對於網域做審查,才完全解除網域被認為是釣魚網站,經歷這件事後,我在想是否像這樣類似的網站我們在處理上,需要有一個比較少用的網域去做測試,這樣會減少上面事件發生。 ## ==20240221== ==教學部分== - 興大部分,第一天加深同學對於JS的印象,重新敘述JS功能項、宣告變數部分、function應用、array與object的使用方式,第二天就開始跟同學說做代辦清單,以此做一個JS的練習,發現有些同學對於JS的使用及邏輯部分還是不太能理解,這部分只能說能幫盡量幫,就像是還沒打通那個邏輯概念,只要打通了應該就可以趕得上。 - 明天與後天部分會跟同學說明git及vue的建置,然後我要先製做shopcard的頁面出來。 ==專案部分== **林業專案** - 過年前業主來說它們的SSL憑證過期了,需要做更換,原以為依照文件去處理應該在一天內可以完成,結果出現了SSL憑證一直讀取到舊憑證的情況,所以我開始爬文嘗試很多,像是先完成憑證,匯出成pfx檔案,然後利用pfx取得私鑰並拿這個私鑰跟憑證檔案組合,做成一個pfx檔案,然後再匯入憑證,並選取[虛擬主機](https://eandev.com/post/security/using-iis-create-and-complete-csr/),也還是沒用,又或是利用cmm開啟正式機的憑證,把新的憑證匯入進去也沒有辦法完成更新,甚至思考是否是因為**網域管理平台** 的快取尚未清除...等等,結果在2/19(一)Stanley進來處理的時候,一下子就完成更新,覺得傻眼,並且發現因為對方的**waf**也要做更新憑證的動作才能使**網域管理平台**也吃到更換過的憑證,之後遇到這樣的問題。 **舊網站處理** - 在2/16(五),舊網站有出現被駭客攻擊,並且網域被google判定為釣魚網站封鎖進黑名單,然後做了緊急處理,先看是不是因為網站出問題,結果看到說被駭客埋入後門,並且駭客把一整個網站丟入我們的網頁內,並且讓網址轉到對方網頁,導致我們網頁的網址被google判定為釣魚網站,目前是把網站不屬於專案網站的檔案都做移除,並且嘗試以其他網域開啟專案檢查,且利用google Search讓google把我們的網址從黑名單方出來,目前進度已經把網站清除乾淨了,目前在等待google的審查部分。 **三期營隊專案** - 目前進度,已確認修改工項,並且開始進行修改,爭取在2月結束前修改完畢。 ## ==20240131== ==教學部分== - 逢大部分,各小組已專案已架設完畢,然後程式部分也進入最後收尾階段,希望這禮拜五能夠順利進行 - 興大部分,過年後就換到興大那裏教學,前幾天會是以JS加深為主,以利於後續進入VUE在打下基礎,且與Stanley討論後續vue部分的教學教案及方向;目前定案為前幾天先教學vue的基本語法及使用方式,後續加入todolist製作還有購物頁面及購物車製作,讓同學熟悉vue頁面的製作。 ## ==20240124== ==教學部分== - 逢大部分,目前各小組進入最後衝刺階段,畫面都有雛型出來了,接下來是對於畫面做細微的調整及加入動畫,這部分我會加下去幫忙,另外這禮拜也要開始架設他們的伺服器了,會需要Never幫忙建置 domain的部分。 - 這次教學中,有看到一個沒用過的CSS屬性 [padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block) ,其作用是只設定padding-top跟padding-bottom,再度感嘆CSS的神奇!! ==專案部分== 花專案部分 - 這是之前的債務了,之前不知道get的時候如果傳遞的是array,它會自動轉換成JSON格式,並且URL部分就會變成&excelData[0]=1 這樣的形式去占滿URL,然後就導致URL太長了,然後就報錯了。 營隊專案部分 - 目前在製作報價單及網站地圖,以網站地圖去說明需要修改的項目,這樣應該會更詳盡地去說明修改點 github要利用vite上架vue網站 - 經詢問Stanely得知需要去看vite的文件去做設定,設定步驟如下: 1. 先在vite.config.js 內加入一段 ``` base:'./',``` 2. 接下來在專案內加入.github 資料夾並在裡面建立workflow資料夾 3. 或是在github上面建立 點選Setting 然後進入GitHub Pages頁面![image](https://hackmd.io/_uploads/HJ8rJ70Fp.png) 4. 選擇上方圖片的Source的選項 點選GitHub Actions 5. 接下來git會讓你要加入一個yml檔案,這邊的檔案要利用[vite](https://vitejs.dev/)文件的靜態部屬文件 6. 找到Deploying a Static Site頁![image](https://hackmd.io/_uploads/rJ8ElXAFT.png) 7. 利用GitHub Pages裡面寫的yml檔案,複製到自己專案的workflow內並建立一個yml檔案 8. 這樣就完成了 剩下的就會跟一般靜態網站做成GitHub網站一樣 ## ==20240117== ==教學部分== - 逢大各小組都進入專題製作階段,僅剩兩個禮拜至三個禮拜製作,目前的話有幫同學們梳理大概的時間區間及請各小組的PM製作時間盤點表還有盯緊小組進度,等明天過去再來看看個同學的進度。 - 另外就是vue及後端laravel的教學部分我需要把這邊的教案讀過一次並且要跟Mike請教如何教學。 ==專案部分== 花專案部分: - 目前有遇到說因為我們測試站主機專案有變多的情況,出現了跳轉頁面延遲問題,經自己排查及詢問Stanely狀況得知是因為測試站主機環境問題導致她出現拿取資料跳轉頁面延遲。(專案量多->使用專案時拿取資料達一定值時會不好拿取)。 營隊專案部分: - 終於把PDF部份解決了,昨天詢問Stanely發現說原本我們的FileController裡面的base64Upload的fn內有把base64碼轉換,所以新增部分就把後面帶附檔名過去讓他轉譯完後加上附檔就可以了 ```php= //如果有上傳附件 if (count($request->attachmentFile)) { foreach ($request->attachmentFile as $data) { $pos = strpos($data['path'], 'application/pdf;'); // 轉換 $fileExtension = $pos ? 'pdf' : 'webp'; $attachmentFilePath = FilesController::base64Upload($data['path'], 'camp_file', $fileExtension); CampFile::create([ 'camp_id' => $camp->id, 'file' => $attachmentFilePath, 'file_name' => $data['fileName'], ]); } } ``` 催眠師專案部分 - 這禮拜業主說專欄文章日期出現隨機,而不是以最新排序才知道說原本的寫法並不是PM規劃的寫法,而且PM也不知道為甚麼會是這樣寫,顯示出學生在寫的時候卻沒有確認工項是否這樣的顯示方式。 ## ==20240110== ==教學部分== 目前教學利用session讓同學熟系CRUD的過程,雖然說是簡易版本,但也讓同學熟悉CRUD的操作 另外目前這班已進入專案階段,所以VUE的教學會放緩的教,vue剩餘未講解的有computed、watch、生命週期、solt、組件使用這幾個部分。 ==證照部分== 目前ipas部分還沒有出現可以報名的狀態,估計應該是要等選舉結束了(? 第二個是Stanley考過的vue證照部分 在興大那邊我需要講解這個證照的一些注意事項及如何報考,這部分的話我可能會在下禮拜逢大這邊試試看我的脈絡部分XDD ## ==20240103== ==教學部分== 接替Mike的逢甲班後續vue教學,目前利用計算機方式教同學把資料傳給子元件做處理,然後在從子元件傳出來,後續會在講todolist然後再加上商品crud購物車部分(? 還需要再交base64轉譯圖片部分跟傳入session帶到另一頁的一些教程,希望他們可以聽得懂,還有我需要改變一下我的說話速度,跟演示過程要再慢一點QAQ ==專案部分== 課照部份昨天有接收到緊急修改的部分,一個是修改下載檔案,這部分有修改完畢;一個是資料顯示錯誤,這部分目前在跟Kaz做確認。 催眠師部分,目前GA跟sitemap都已綁定上去,關於sitemap我是利用XML的方式處理,先利用線上的網站幫我先產生網站的[sitemap](https://www.xml-sitemaps.com/),然後放在專案的public/sitemaps 內(這樣才可以被引用),接下來在public/robot.txt裡面加入一段 `` Sitemap: https://beforedawns.com/sitemaps/sitemap.xml `` ![messageImage_1703241915090](https://hackmd.io/_uploads/S1hIpfzda.jpg) ![messageImage_1703241927667](https://hackmd.io/_uploads/SyzwaGM_a.jpg) ![messageImage_1703241933965](https://hackmd.io/_uploads/rJTvpzf_p.jpg) 這樣就可以在Google Search Console使用sitemap的功能讓網站提高曝光度。 備註:如果在寫入後有出現錯誤問題的話可以詳見這個[網站](https://shopstore.tw/article/295#Title02) ## ==20231227== 專案修復部分 - 營隊專案 - 目前在修復一些bug,其中一項是屬於附件上傳可傳pdf或是圖片,這部分遇到了一個難題,編輯營隊部分,沒有出現問題,只要修改一下就可以完結,但是在新增營隊部分,他在編寫時會有四個頁面傳遞,而目前傳遞方式是先轉成字串傳到後台再轉成json存進laravel session 內,但是這樣會出現file會報錯,目前正在想辦法處理。 這禮拜就大概是處理這個專案的小bug處理及跟對方溝通。 ## ==20231220== 專案修復部分 - 花專案 - 這次需要修改的地方是所見及所得部分還有出現出車日期修改後儲存時出現500錯誤, - 出車日期出現500錯誤部分,排查下來是發現說之前寫的時候忘了需要先做防呆,導致她在做運算的時候出現了null+int的問題。問題發生地方如下: 其中$voucherNow裡面的current_voucher在儲存的時候就沒有數字,所以這邊的算式就沒辦法成立,然後就報錯了,那之所以還是有改動的原因是因為儲存的東西並不是這邊,所以還是有被存下來,那這邊修改的話,只要在current_voucher後面加上 ?? 0 就可以避免掉說取出來的如果是null的話就無法計算的報錯問題。 ```php= ($orderInfo->voucher !== 0) { $member = Member::where('user_id', $user->id)->first(); $voucherNow = UserVoucherRecord::where('member_id', $member->id)->latest('id')->first(); $lastVoucher = $voucherNow->current_voucher + intval($orderInfo->voucher) ; ``` - 另一個是所見及所得部分修改,這邊呢,有出現報錯現象,那一開始先利用Stanley的方式將套件變為本地化,然後還是出現了JS的報錯,繼續進入排查看哪邊出現問題 ![messageImage_1702956039101](https://hackmd.io/_uploads/HJJ4hi1vp.jpg) 才發現說第一是hr部分,套件原本就有提供,不需要額外引入,只要把引入的部分拿掉 hr的報錯就不會出現了,第二部分是語言套件的引入錯誤,這部份昨天跟Stanley還有Mike 一起排查,發現說之前在引入時有把i18n一起帶過來,然後因為這邊再引入的時候會跟套件的中文有衝突,導致套件的中文不會出現,然後i18n的fn也沒有用的,所以把這個fn刪掉後,就可以正常運作了。 - 營隊專案 - 這次遇到說傳字串進入後台有資料,但是如果傳檔案進入後台卻沒資料的情況,當時與Mike討論了許久,還是沒有解決,然後在12/19那天請教Stanley後,發現說,傳到後台,如果是純文字時,逆用PUT是可以傳入後台的,但如果今天要傳入的是檔案(word、pdf、excel、ppt...) 則需要利用post才能正確傳入後台。 - 教學方面 最近接到要去當助教的行程,第一次去大學方面的這樣自辦職業訓練班級,他的助教業務好多喔,光是行政上,要做簽到退、幫忙訂便當、給教室日誌之類的事物,還有在沒有電腦的班級需要拉電線給同學們使用筆電,這些部分,所幸的是,這次班級的同學沒有出現像豐原的班級狀況,整體上來說,是不錯的!! ## ==20231213== - 這禮拜都在調整催眠師專案的前台介面,調整過程中發現最一開始如果沒有先設定好layout,後續的修改會變很困難很多;沒有設定好的話在調整方面會變成需要每一個區塊都要進行檢查,然後深刻的體會到字型跟粗體還有文字設定綁在一起會有超乎想像的bug出現,之後可以把字型跟文字設定分隔開來,在引用CSS的時候就不用重複的引用字型這件事,在修改上也比較容易。 - 營隊專案部分,目前在跟對方談論第二次優化的部分,近期內會有一個結論,幸運的是前台沒有多少需要改動,後續會盡快製作報價單,然後不合理的部分也會跟對方討論,適時的推掉,(這部份真的比較麻煩)。 話說交換禮物部分,我還真的沒有想法說要拿什麼做交換呢,有沒有意見可以參考一下XD ## ==20231205== 這次去科大講課的過程中,想起之前資料庫在設計時會用到[ER-model](https://www.visual-paradigm.com/tw/features/database-design-with-erd-tools/)去設計每個資料庫的關聯及欄位型態跟名稱,觀看會比較視覺化。 週任務清單: === 1.power bi課程結束 2.心理師專案-介面調整 3.營隊專案-修正bug及評估新附加功能 - power bi課程部分 - 終於是結束了power bi的課程,在這教學中看到很多自己不足的地方,從備課到教學,說話談吐跟用字遣詞都需要琢磨,尤其是備課部分深刻體會到說,即使自己在懂軟體或是所謂的運作流程,還是需要在先前梳理一遍以及要重新操作過一次,以確保當下不會有錯誤發生。 - 接下來就是要先把這幾次的上課內容做一個彙整,把資料做一次整理 - 心理師專案部分 - 目前專案剩下的部分屬於前台頁面調整,然而在12/01,與PM對談時發現後台有一塊的功能,與PM跟業主談妥的功能不相符,且那個功能又是屬於金錢方面的,所以這部份我請PM跟業主說會晚點處理,畢竟現在先把前台處理完才是最急迫的。 - 後續有跟PM討論,結果是PM有跟Nero說明資料流向及串接部分,但資料是沒有做正確導向,有一部分是我的問題,當時Nero有給我看過資料表圖,我沒有做詢問看了他的資料表圖感覺沒問題就說OK了QAQ - 營隊專案部分 - 目前剩下小修改部分,算是在收尾階段了,然後對方有提出需求優化的功能部份,目前還沒給答覆 - 最近修改的時候發現很多詭異的地方,這個專案一開始存進資料庫同一個欄位有不一樣的資料寫法,存入資料庫的資料五花八門,真的是太可怕了,還好的是後面的專案都有統一資料存入的規格,要不然後續維護上會產生不必要的時間成本。 ## ==20231129== 週任務清單: === 1.課後專案-弱點掃描修改 2.林場專案-網頁無法開啟排查 3.power bi製作上課教學ppt 4.心理師專案-頁面調整及整體檢查 - 課後專案 - 這次是第一次修改弱點掃描的風險部分,可以預見會花到很多時間去處理,在修改中也發現之前的專案寫法沒有根據這樣的規則去編寫專案,然後也出現說原本可以使用的功能再加入後反而沒辦法使用需要不斷的調適;然後自己使用ZAP去做弱點掃描的時候也發現說,對方沒有掃描出來的,我們自己卻掃描出來了,所以還要再修改自己掃描出來的部分才算完結,這個也看到很多不一樣的風險修改的部分,不管是csp或是hearder沒有表頭還是有使用 ```<from>```卻沒有加入csrf這些都一一的跑出來了。 - 林場專案 於11/28接到林場的專案無法顯示網頁,就開始排查,首先先看是不是對方把防火牆打開了或是更新了,才會出現這樣的畫面 ![螢幕擷取畫面 2023-11-29 132139](https://hackmd.io/_uploads/SJ5_5BNrT.png) 所以檢查是否為防火牆開啟導致出現這樣錯誤,那我是用cmd去ping他的網址看看封包會不會被擋住,cmd的畫面 ![螢幕擷取畫面 2023-11-29 132430](https://hackmd.io/_uploads/BJ1XiSVST.png) 到這邊看到說,封包有回傳也沒有丟失,代表說網域還是綁著某個ip的,當時的我以為他這邊ip是正確的就沒有在往下探察,轉而回報Kaz這邊防火牆跟網域是沒問題,沒有頭緒為什麼會出現這樣的錯誤,後來換Neo大大來問我目前的情況是怎麼回事,他要我先去檢查網域的狀態,那我就使用了[WHOIS](https://www.whois365.com/tw/)去查看![螢幕擷取畫面 2023-11-28 160807](https://hackmd.io/_uploads/SksLnr4Bp.png)發現說他的網域需要續費,而之所以會出現這樣是因為他的網域在GoDaddy上購買,時間到後GoDaddy就直接把IP改為自己的ip,從而導致網頁沒辦法到我們的專案內開啟。 - 心理師專案部分 - 這邊與業主、設計師三方討論及QA,出現了很多介面上需要在重新調整,以及在最初的時候,自由度及美學的相互平衡;網頁上有很多地方是屬於利用文字編輯器產生的區塊,這些區塊會依照文字編輯器上的字型、粗體甚至是顏色都會產生與原本設計稿不相符的狀況,所以在最初的時候應該要確認對方的最初的需求,不用說文字修改就一定要用文字編輯器,利用input與textarea也可以達到同等效果。 - 在套件的使用上也發現了一些通病,就是有些人(包括我)會出現不去看官方文件,轉而去找網路上教學文章,利用上面的方式,繞了一大圈,然後官方文件就有寫到說只要加入兩三行就可以實現的效果,所以在教學學生及自己在使用上要先看懂官方文件的運作及網路上教學文章的修改哪個最省力且後續改動上最好使用的去著手處理 分享一個CSS屬性 [mix-blend-mode](https://www.webdesigns.com.tw/css_mix-blend-mode.asp) 最近在跟其他設計師研討別人的網頁時,看到了這個CSS屬性,它可以讓圖片附上透明、膠捲片的效果,這樣就可以在網頁上的美觀及變化度有很大的空間 ## ==20231122== 週任務清單: === 1.催眠師專案除錯及頁面調整 2.舊專案PDF顯示上下左右顛倒修改 3.營隊專案處理發票金流問題 4.Ipas的準備 5.花專案做最後整理結案 - 催眠師專案除錯及頁面調整部分 - 這次是先由學生製作,然後再由我、Never、Mike接手後期收尾部分,在進行頁面調整及除錯時發現說學生在編寫的時候,不會去考慮例外處理這部分,從而導致如果今天後台如果給的資料並沒有完整,或是根本沒有,那整個頁面就會完全跑不出來,舉個例子來說,此專案有個地方為專欄文章,在後台部分新增文章,但是分享的人名跟直稱非必填,藉此可以在後台不用填寫就可以完成編輯,從而導致前台在顯示資料時拿取不到該欄位而導致報錯,所以我在每個引入資料的地方都用了「?」 跟 「?? ''」讓資料在接進來如果沒有後面的資料則會顯示空字串 ```html= <div class="md:w-[calc(50%-8px)] md:absolute md:left-0 md:bottom-0"> <div class="flex flex-col gap-4"> <span class="font-pc-black-remark text-db-white">{{ getDate(column.columns_date) }}</span> <div class="flex flex-col gap-2"> <span class="font-pc-song-smalltitle text-db-white">{{ column?.hypnotist?.hypnotist_name ?? '' }}</span> <div class="flex gap-2"> <span class="font-pc-black-content text-db-white">{{ column?.hypnotist?.first_appellation ?? '' }}</span> <span class="font-pc-black-content text-db-white">{{ column?.hypnotist?.second_appellation ?? '' }}</span> </div> </div> </div> </div> ``` - 然後後台部分,學生在處理資料庫上面有使用到軟刪除的應用,但是在需要用到軟刪除的頁面卻沒有把軟刪除這部分加進去,導致該要出現的資料沒有出現,原本學生測試沒問題的地方只要有軟刪除就會出現資料對不上的地方。例如: 在後台有一頁面為個案管理,其目的就是所謂的訂單查詢,查看有登記在後台的催眠師在相應的時間內服務了那些患者及次數;資料庫上面對於催眠師及服務項目都有加入軟刪除,但是在列表頁面上卻沒有顯示出來,其原因之一是在Models上面沒有寫上在拿取時要連同軟刪除一起拿出來做組裡,而學生有可能沒使用的原因,我想應該是在後面新增案例時不能把已經刪除的催眠師及服務項目也一併加入進去。下面是利用Models跟Controller內加入軟刪除應用的寫法 Models方式: ```php= // 以服務項目為例: class ServiceItem extends Model { use SoftDeletes; protected $table = 'service_items'; public static $snakeAttributes = false; protected $casts = [ 'service_price' => 'int', 'service_time' => 'int' ]; protected $fillable = [ 'service_name', 'service_price', 'service_time', 'icon_manual', 'icon_path', 'service_abstract' ]; // 在 ServiceItem 模型中 一個服務項目 有多筆的服務紀錄 public function caseService() { //在後面關聯時加上withTrashed() 去拿取軟刪除的資料 return $this->hasMany(CaseService::class, 'service_item_id', 'id')->withTrashed(); } } ``` Controller方式: ``` php= //個案列表_頁面 public function caselist(Request $request) { $searchIt = $request->searchIt; $hypnotist_id = $request->hypnotist_id; $service_item_id = $request->service_item_id; $caseStatuses_id = $request->caseStatuses_id; $caseInfo = CaseInfo::with([ 'hypnotist' => function ($query) { $query->withTrashed(); // 包括軟刪除的催眠師 }, 'status', 'latestCaseService' => function ($query) { $query->with(['serviceItem' => function ($subQuery) { $subQuery->withTrashed()->select('id', 'service_name'); }]); } ]) ``` - 然後關於套件引用部分,這個專案有引用兩個套件,一個是所見及所得,一個是圖表套件;就發現學生在使用套件上會直接去查看別人使用的案例,而不是利用套件官方文件去編寫,雖然說這樣做法不是不可以,但是也要跟學生說要配合官方文件去佐證別人使用的跟官方差異在哪。 - 在這個專案內,我還發現了一個問題,Nero的寫法與其他組員的不太一樣,雖然都是vue3的寫法,但是後續維護的人會需要轉換寫法,對於我來說,我會需要些時間去調整適應。 - 舊專案PDF顯示上下左右顛倒部分 在這專案內他引用了pdf.js,去處理後台如果是pdf檔案的話,就利用pdf.js生成圖片顯示, 在舊專案設定中,因為她在抓取的寬高並沒有真的抓取到,所以一開始他的圖片出來會是上下顛倒 ,然後他就利用``` style="transform: rotate(180deg);"```的方式把她轉正,但這次卻出現圖片鏡像,所以我這次把程式碼一一做log查看是否哪邊有錯誤 發現到它 ``` var viewport = page.getViewport(1);``` 在抓取的時候他的寬高一直是NaN,從而導致他的圖片會上下顛倒,所以我就做了一些小修改 從原本的 ``` js= async function renderPDF() { let src = pdf.getAttribute("data-src"); let pdf_doc = await pdfjsLib.getDocument({ url: src }).promise; window.pdf_doc = pdf_doc; let page = await pdf_doc.getPage(1); var viewport = page.getViewport(1); await page.render({ canvasContext: pdf.getContext("2d"), viewport: viewport }); } ``` 修改為 ``` js= async function renderPDF() { let src = pdf.getAttribute("data-src"); let pdf_doc; try { pdf_doc = await pdfjsLib.getDocument({ url: src }).promise; } catch (error) { console.error('Error loading PDF document:', error); return; } window.pdf_doc = pdf_doc; let page = await pdf_doc.getPage(1); const viewport = page.getViewport({ scale: 1 }); // 檢查是否有抓到高寬 if (isNaN(viewport.width) || isNaN(viewport.height)) { console.error('Invalid viewport information'); return; } // 查看是不是有被旋轉 const rotation = page.rotate; // 設定 Canvas 的高寬 pdf.width = viewport.width; pdf.height = viewport.height; const context = pdf.getContext("2d"); await page.render({ canvasContext: context, viewport: viewport }); } ``` 將他的``` var viewport = page.getViewport(1);``` 修改為 ``` const viewport = page.getViewport({ scale: 1 }); ``` 以此抓到他的寬度及高度。 - 營隊專案處理發票金流處理 - 目前以處理完整,這邊是因為在進入發票時他會有需要整理項目別,但是出現了如果項目別是空的那他那邊會出現報錯,從而沒辦法完整開出發票,而為什麼信用卡可以打出發票的原因,初步判斷是,他有選擇加購項目,這樣他的項目別就不會是空值。 - 藍新的notifyURL,需要在後面加上回傳值,這個在舊專案內沒有編寫到,在介接文件上也沒有提到過,是我拜託業主方寫信詢問才知道說在接到值出處理完後要return回傳 'OK'或是'200' 的訊息給對方 - Ipas的準備 在上上禮拜有初步了解考試的範圍,ISO27001的條文佔據約60%,所以如果能熟讀這塊,拿到這張證照的機率應該會是蠻高的,目前正在整理資料,預計會在是12月中把資料做一個初步彙整,目前有找到的一份資料 [線上PDF](https://www.zhmici.net/wp-content/uploads/2023/05/ISO-27001-2022%E4%B8%AD%E6%96%87%E8%AF%95%E8%AF%91%E7%A8%BFv1.1.pdf) 但是是簡體中文 ## ==20231115== 週任務清單: === 1.於彰化授課教學wordpress建立及製作 2.poc專案製作-整理匯入的資料及power bi的製作 3.營隊專案的發票問題 4.事情分派及個人思考修正 - 彰化授課部分 因為再專案是很少使用到這個軟體,然後又因為自己的自以為及便宜行事沒有事先演練一次,導致學生在學習軟體時沒辦法有很好的教學感受,這個我引以為戒,讓自身對於要教學的課程要有更深的認知。 - poc專案部分 - 這次與Stanley合作製作poc專案,利用power bi製作圖表呈現數據,發現到可以快速的生產出圖表,不需要編寫程式碼,但在真正放到專案內的時候,發現說需要有學校或是公司信箱,才能做到發佈到網路上這件事,進一步搜尋也看到說她是需要Microsoft 365的公司或學校申辦的信箱帳號,所以我跟別人借了帳號去上傳及發布,後續要清楚她的收費問題及程度; - 另外,在編寫資料庫的時候發現資料型態「float」:她能儲存的空間僅有7位有效值,並且包含小數點後位數也會一起算入,所以在製作匯入資料這部分,出現了要修改資料表的資料型態部分,之後製作需要有存入小數點位的欄位,建議是使用double資料型態。 [MySQL資料型態說明](https://n.sfs.tw/content/index/10266) 、[MsSQL數字型態說明](https://louis176127.pixnet.net/blog/post/178990312), - 然後在製作資料庫建立時與Stanley討論欄位命名跟資料型態,發現說之前我在作主表及子表的關聯欄位命名時,並不是主表的名字+_id去作為子表的關聯欄位,例如: 主表為```company_data_infos``` 子表為```company_energy_manages```,我在子表的關聯欄位是寫```campany_id```,但這樣的辨別度不是很清楚並沒有指明是哪一張主表關聯,所以Stanley說把關聯欄位命名為```company_data_infos_id```這樣,雖然說欄位名稱會變很長,但相對的對於主表的辨識度會提升很多。 - 營隊專案部分 目前發票問題出現了奇怪的狀態,信用卡部分她的發票是可以開出來的,唯獨非即時性交易的發票,開不出來,且也試過同一個營隊利用信用卡跟菲及時性交易雙重測試,信用卡可開出發票,非及時性交易卻沒辦法,這部分目前是設定紀錄點,記錄到非及時性交易會到送出發票請求後就沒回來了,所以有方向在進行修改中。 - 事情分派及個人思想修正部分 如上面所說,事情分派問題,沒有做到說理解上面給的意思,做完後在回報時才被唸說不會做事情,以學生後須專案製作為例: 由原本是Mike帶的組員分派到我這邊的專案,而我自認為是熟悉組員就直接分派任務,並且沒有找Mike一起過來開會,藉此由詢問Mike組員程度去理解分派任務對於組員的學習,且也可讓Mike可以知道組員近期的狀況,這是我這次沒有做好的事情,然後再跟Stanley合作製作專案,也因為我自己的態度及製作時間分配問題,拖延到原本預定的時間,這也是我需要作改進的地方;然後再跟Neo在聊天時,發現自己說話時會有未經過大腦就發言的情況,導致有些話語是有矛盾甚至是推翻之前的論點的情況,所以要修正自己的思想去修正上面的有犯錯的部分。 ## ==20231108== 週任務清單: === 1.於彰化授課教學html、css跟wordpress使用及認識網頁架構組成製作 2.營隊專案修正錯誤及協助對方處理事宜 3.新專案的會議上提出的需求及確認是否能做到,還有對內需要如何溝通讓協作夥伴知道怎麼作業 4.搜尋power bi 可以當作範例的素材,以便下禮拜上課時使用 - 彰化授課部分 依照Never所製作的上課教案執行,只是要先轉換一下語言說明;有些點我還是有些不明白,例如為何margin-top這個屬性下再子層卻是會被複層吸收的講解部分還不清楚要如何跟學生們說明說為甚麼,也有學生對於css的計算及轉換成百分比部分的思考問題會卡住,這部分我是這樣講解: 百分比是以父層為基準,假設父層600px寬度,那子層的寬度設定為50%則子層的寬度為300px。 感覺這樣的解釋可以再更優化一些QAQ。 - 營隊專案部分 目前遇到了在新增營隊時,說明內文如果有上傳圖片,則在儲存時圖片會消失,這部分Mike發現是之前的寫法有寫了computed去載入出現的問題,詳情要問過Mike,然後還有發票問題,這邊發現說在藍新部分如果在填寫明細項目時有填入出現空白明細的話會出現無法送出發票的問題,還有金流部分,信用卡有些User會有信用卡授權失敗問題,但是回傳時會有出現Pay_time欄位,當初的寫法會導致User尚未成功付款就修改了訂單狀態及開出發票,所以這邊我把他做了修改,將原本在外面判斷是否有Pay_time的判斷式整個移入判斷回傳訊息裡的狀態欄位是否為success的判斷式中,以此避免沒有成功繳費,訂單狀態卻修改為已付款的狀況。 - 新專案部分 應該說是跟著開會的部分,整個流程、記錄、會後整理還有會議重點部分,這些在會議結束後都沒有完全整理出來,並且我自己沒有好好的消化整理會議內容及該要處理的事項,這樣會導致我在跟協作夥伴說明會議情況及製作範圍還有細節部分,都會出現一知半解的狀況,這邊我要自己以這次會議當作警惕,對於對方說明的需求及整個專案的範圍還有細則要都想過,以這次專案為例:我在跟Stanley說明上禮拜三的會議時,Stanley提出的一些問題我卻無法說明,這樣對於專案來說幫助甚微,也會讓其他人員可能會導向錯的方向去,上述之狀況是我必須要修正的情況。 然後目前有再思考是否要把wordpress及power bi製作成與Never的教案一樣的HackMD。 在網路上有找到一個 [HackMD](https://hackmd.io/@eMP9zQQ0Qt6I8Uqp2Vqy6w/SyiOheL5N/%2FBVqowKshRH246Q7UDyodFA?type=book)的語法大全XD --- ## ==20231101== 研究power bi導入資料庫還有ˋ後面對於資料生成儀表板以及對於power bi的更多的應用 營隊專案錯誤處理及加入附加功能 花專案完成修改並且更新到正式站 關於報價單問題及向外報價討論 - **power bi學習** 上禮拜的SQL導入問題,可能的原因應該是再安裝的時候shell有開啟著,它的外掛安裝沒有裝好,導致power bi即使重開也沒有吃到安裝的應用程式,目前只要按照他安裝方式,就可以順利地引入本地的資料庫進來。 使用手冊[點我](https://docs.google.com/presentation/d/1gQ8tCD2UEVqDSeEZWzflwt1h0RnKkZFd/edit?usp=sharing&ouid=109059304129232555166&rtpof=true&sd=true)。 - **營隊專案** 營隊部分,這邊出現了對方在輸入時有出現"text/text/200"的儲存現象,所以對於會有影響的頁面進行下面的修改: ```jsx= ticketTotalPrice() { const { coupon } = this; const justTicketPrice = this.campBatchData.price * this.attendantInfoDataSession.length; let addOnsPrice = 0; this.attendantInfoDataSession.forEach(data => { data.addOns.forEach(item => { if (item.answer) { addOnsPrice += Number(item.answer.split('/')[1] ?? 0); } }); }); const couponPrice = coupon?.price ?? 0; let discount = 0; switch (couponPrice) { case 1: discount = 100; break; case 2: discount = 200; break; case 3: discount = 300; break; case 4: discount = 500; break; case 5: discount = 800; break; case 6: discount = 1000; break; default: break; } const total = addOnsPrice + justTicketPrice - discount; return total; }, ``` 在第9行部分修改為 ```jsx= const answerArr = item.answer?.split('/') ?? []; if (answerArr.length !== 0) { addOnsPrice += Number(answerArr.at(-1) ?? 0); } ``` 先把字串切割陣列(answerArr) 然後利用at()抓取陣列最後一個值也就是數字去做加總 顯示的部分也是一樣的修改方式,將原本利用array的key值去顯示修改為利用at()抓取最後一個key值顯示。 - **花專案** 目前花專案部分修改都已完結並且更新到正式站,測試過修改的部分也正常運行,目前在等待下一步指示。 - **報價單** 從Kaz出國後開始學習報價單的寫法,以及對於業主上的對談,發現還有很多東西需要去學習,然後對於自己的談吐已及一些習慣都需要改進,再談吐上對於咬文嚼字的增進,與需要帶入相對應的知識量還有官方語言的部分需要再多練習,然後跟業主在對談時不要怯場,然後自己的習慣問題,我自己有個不好的習慣,就是自己未確定的事情或是資訊,會依照自己的想法回應對方,導致讓上層人員或是一起工作的同事不利於作業及對於業主也不好說過去,以上這些都是我需要去修改;報價單部分,我也是第一次大開眼界可以這樣的報價,以往家裡的報價沒有這樣的報法,這部分我會再進行分享,然後會想跟各位討論的問題是,關於頁面的維護部分,該要怎麼去計算他的一次量是多少,這部分我自己沒有一個界定在,想跟各位集思廣益一下怎麼去設定這樣的一次量。 --- ## ==20231025== 研究power bi 地域圖生成操作及利用MySQL導入資料 營隊專案處理非即時交易回傳沒反應問題 花專案處理篩選及排序同時出現問題 - **power bi學習** 目前地域圖及量測計這部分都已教授,MySQL導入部分還需要再做研究,因為按照官方提示的操作沒 辦法順利完成。 - **營隊專案** 藍新金流系統已完善,與綠界不同的是,他沒辦法用同一個function去執行非即時性回傳的數值。 經過跟stanley討論後,之後會嘗試利用不一樣的controller function導向同一支controller function。 - **花專案** 目前已修改完畢,但是在進行整個專案的整理及排查;因為篩選及排序當初是沒有做再一起,形成了如果篩選了點擊排序會重新撈資料,但是不是從以篩選後的資料下去做排序,所以要修改一開始取資料的方式。 以會員管理為例: ```php $member = member::query()->with(['discount' => function ($q) { $q->withTrashed(); }]); ``` 修改為 ```php $member = member::join('users', 'members.user_id', '=', 'users.id'); ``` 利用[join](https://laravel.com/docs/10.x/queries)把兩張表作融合並且使用select去篩選需要的資料欄位,接下來在下面篩選的部分我也做了修改,從原本在下面篩選時要做的join修改為利用已做好的function做使用,所以會修改為下面的方式。 ```php $rules = [ 'short_name' => $sortShortName, 'user_discount_id' => $sortMemberType, 'salesperson_id' => $sortSalesperson, 'name' => $sortName, 'country_id' => $sortCountry, 'users.created_at' => $sortStartDate, ]; columnSort($member, $rules); ``` 可以看到「'users.created_at' => $sortStartDate」這部分,利用users去確定他是要用哪張合併前的欄位做篩選。 在前台部分也做了些微的改動: 以會員管理列表為例:搜尋部分不需要做更改,僅更改篩選部分 ```jsx= /** * 欄位排序 sort column * @param {integer} colIndex => table 表頭陣列 thData 中的 欄位index * @param {object} thData 本頁 table 表頭陣列資料 * @param {string} url 本頁頁面路徑 * tableSortCol(colIndex, thData, url); */ goSortHere(colIndex) { const data = { sort: this.thData, search: this.search, }; tableSortCol(colIndex, data, this.sortUrl); }, ``` 這邊把上面搜尋的整個data一起帶入排序內並且在排序的function做修改調整 ```jsx= ** * 欄位排序 sort column * @param {integer} colIndex => table 表頭陣列 thData 中的 欄位index * @param {object} thData 本頁 table 表頭陣列資料 * @param {string} url 本頁頁面路徑 */ const tableSortCol = (colIndex, thData, url, data1) => { const search = thData.search; if (thData.sort[colIndex].sort) { thData.sort[colIndex].state = thData.sort[colIndex].state === 1 ? 2 : 1; let whichDo = {}; whichDo[`${thData.sort[colIndex].backSortCol}`] = thData.sort[colIndex].state; if (!data1) Inertia.get(route(url), { ...whichDo, ...search }, { preserveState: true }); else Inertia.get(route(url, data1), { ...whichDo, ...search }, { preserveState: true }); } }; ``` 在tableSortCol這支function上做了改動然後再帶出資料的時候將兩邊的資料和在一起傳至後台做搜尋及排序的作用 --- ## ==20231018== - **上禮拜截至10/18週活動紀錄** - **上禮拜任務如下:** 1.製作power Bi課程教學的PPT熟悉power Bi的使用 2.業主的兩項功能要製作出報價單 3.營隊專案功能項修改-關於金流發票及使用功能修改部分 4.花專案功能項修改-由對方提供的PPT處理修正 5.至南投班級解決學生處理製作專題上難題 - **power bi學習** 這是一個利用資料導入程式內後就可以直接顯示出圖表,並且可以導入不同的資料列別(excel、JSON、API、SQL),並且要學習如何製作PPT及用字遣詞修正。 - **業主需求的報價單** 學習如何去製作報價單及價格跟文字上的處理,以及要跟對方如何應對等等方面的業務內容。 - **專案功能項修改** 營隊專案-金流部分:藍新金流處理修正,並且再一次閱讀串接文件,發現他的URL其實會有不一樣的傳入,所以要思考他回傳過來是否要接POST或是GET讓自己程式接收到對方要回傳的資料,目前有遇到非即時性回傳部分判斷式會沒有反應。 花專案部分: 目前問題都有修改了,原本程式寫法撈出資料會因為資料大量而變得導入頁面時間過長,所以要把原本的利用map跟重新撈資料的做法修改為利用with去撈資料,進而減少要再重新進入資料庫撈出資料。 目前也有一個問題要處理,頁面進到下一頁然後回到上一頁時會把上一頁的篩選沒辦法保存。