트위터 복제 앱을 10일 만에 만든 이야기

이번, 웹상에서 「CloudDiary」라고 하는 교류 사이트를 만들었습니다.
데모는 아래를 참조하십시오.

스마트폰 버전(GIF 이미지)


PC 버전

이 앱 정보

주요 기능은 트위터와 비슷하며 디자인은 구글이 추천하는 머티리얼 UI를 채택했습니다. 언어는 HTML, CSS, JavaScript, PHP, Ajax (비동기 좋네요)입니다. 메인 페이지는 SPA로, 바닥글의 네비게이션으로 화면 천이해도, 페이지백했을 때는, 전의 페이지로 돌아갑니다.

기능 목록

로그인/로그아웃

비밀번호 비가역 암호화 (해독할 수없는 암호로 DB에 등록)

문장 투고

이미지 게시물

좋아요 (Ajax에서 비동기 처리)

코멘트 기능

Twitter 공유

따라/팔로워

아이콘 이미지

프로필 변경

주요 기능의 작동 방식

데이터베이스는 users 테이블, posts 테이블, likes 테이블, replies 테이블, follows 테이블의 5개로 이루어져 있습니다. 예를 들어 뭔가 게시하면 사용자 테이블의 게시 수가 업데이트되고 게시 테이블에 세부 열이 추가됩니다. 이러한 방식으로 데이터베이스가 함께 작동합니다.

PHP

기초 토대는 이런 느낌입니다. 이것을 응용하면, 유저마다의 좋아하는 수, 코멘트 내용등을 꺼내 표시할 수 있습니다.

index.php

<!--postsテーブルのnameを取り出す-->
<?= foreach($posts as $row): ?>
<?= echo $row['name']; ?>
<?= endforeach; ?>

<!--セッションがあればユーザーの名前を表示-->
<?= if(isset($_SESSION['user'])): ?>
<div class= "user-name"><?php echo $_SESSION['user']['name']; ?></div>
<?= else: ?>
<div class= "user-name">User name</div>
<?= endif; ?>

Ajax

좋아요 버튼을 누르면 Ajax에서 비동기식으로 likes 테이블에 새 정보를 삽입합니다. 장점은 예를 들어 아래로 스크롤하는 동안 좋아하는 버튼을 누르면 페이지가 다시로드되어 맨 위로 돌아가는 것을 방지합니다. 또, 감각으로서는 순간에 좋아요 버튼을 누를 수 있기 때문에, UX가 향상합니다.

자바스크립트

특정 버튼을 누르면 팝업 표시를 내거나 부품을 클릭했을 때 파문을 내고 있습니다.

결론

이번에는 PHP를 사용하여 이러한 교류 사이트를 만들어 보았습니다.
뭔가 조언 등 있으면 가르쳐 주시면 좋겠습니다.
그리고 이 기사가 여러분에게 도움이 되면 다행입니다.