기사 개요

작성한 포트폴리오의 해설입니다. 다음을 정리하고 있습니다.

배경

주요 기능

개발 절차

궁리점

과제

배경

포트폴리오 작성에 즈음해, 「Udemy」라고 하는 서비스를 이용해 기초를 공부했습니다.
공부기간 1~2주
htps //w w. 우데 my. 코 m / 코 r세 / 코 mp ぇ te b2_jp /

사양

언어
PHP 7.4.2
javascript
DBMS
MySQL 5.7.26
개발 환경
MacOS Catalina 10.15.5
MAMP 5.7
도서관
jquery
프레임워크
Bootstrap 4.2
버전 관리
Git 2.24.3
프로덕션 환경
xserver

주요 기능

로그인 기능

· 가입 화면

· 로그인 화면

게시 기능

왼쪽 레이어에서 모든 사용자의 게시물을 표시하거나 자신의 게시물만 표시하거나 전환할 수 있습니다.
중간 레이어에서는 사용자 이름과 게시물이 표시됩니다.
오른쪽 레이어에서는 트윗을 게시할 수 있습니다.
화면 크기가 작아지면 오른쪽 레이어가 아래로 돌아갑니다.

개발 절차

요구 사항 정의

환경 설정

데이터베이스 디자인

코딩

xserver 배포

1. 용건 정의

이번에 만드는 앱에 필요한 기능
· 가입
· 로그인
　·세션
・트부야키 투고

--여유가 있으면--
· 검색 기능

php와 DB를 이용한 구축을 실시한다.
udemy에서 공부한 Bootstrap도 활용한다.

2.환경선정

기본적으로는 「Udemy」로 배운 환경을 사용한다. (상기 사양에 기재)
프로덕션 환경에서는 지명도가 높은 「xserver」를 사용한다.
Git과 GitHub는 연습으로 사용한다.

3. 데이터베이스 설계

정규화를 의식해 설계. 조사한 결과 Twitter의 DB는 검색성을 높이기 위해 투고된 월별로 인덱싱하는 것 같습니다. (이번에는 스루)

4. 코딩

코딩 실시

4.1 데이터베이스 생성

MAMP의 phpMyAdmin을 사용하여 데이터베이스를 만듭니다.

4.2 로그인 화면

화면 디자인을 단순화하기 위해 Bootstrap을 사용합니다.
가입과 로그인 화면 전환은 jQuery의 toggle을 사용합니다.
PDO를 사용해 MySQL에 접속해, 가입 및 로그인을 실시한다.
미입력의 바리테이션을 구현.
로그인할 때 세션 사용.

4.3 메인 화면

Twitter를 이미지해 화면을 3분할로 했다.
플렉시블 디자인이 되도록 Bootstrap을 사용.
게시된 텍스트를 사용자 이름과 함께 목록으로 표시합니다.

샘플 코드

home.php

    <div class="col-6">
        <h2>つぶやき</h2>
        <?php displayTweets(); ?>
        <?php    function displayTweets(){
            global $pdo;  

        $sql = "SELECT * FROM tweet LIMIT 30";
        // SQLステートメントを実行し、結果を変数に格納
        $stmt = $pdo->query($sql);

        // foreach文で配列の中身を一行ずつ出力
        foreach ($stmt as $row) {
        ?>            
        <div class="card">
            <div class="card-header">
<!--                ユーザーネーム表示-->
                <?php showName($row['id']); ?> 
            </div>
            <div class="card-body">
                <h5 class="card-title">
            <?php            
                // データベースのフィールド名で出力
              echo $row['text'];
            ?>
                </h5>
                <p class="card-text"></p>
            </div>
        </div>
        <?php
                }        
            }
        ?>
    </div>

5.xserver 배포

프로덕션 환경에서는 xserver를 사용.
xserver에 DB를 세우고, 프로그램도 DB 연결 부분의 수정.

궁리점

· 「Udemy」의 교재에서는 DB 접속에 mysqli 함수를 이용하고 있었다.
시대는 객체 지향이라는 것이므로 처음부터 조사하여 PDO를 구현했다.
・플렉서블 디자인을 의식해, Bootstrap을 이용한 개발을 실시했다.

미래의 도전

한 가지 동작이 생긴 시점에서 완성했습니다.
주요 과제는 다음과 같습니다.

스마트 폰이라고 보기 어렵다

암호를 암호화하지 않았습니다

로그 아웃 버튼 없음

디자인이 쇼보

jquery와 react.js의 차이점과 사용법에 대해 알아보십시오

참고문헌

PHP+MySQL로 포트폴리오 만들기

GitHub 계정

freedog1
htps : // 기주 b. 이 m / f하지만 g1 / 트윗 _1