[메리크리] 서버 연결 및 데이터베이스 구축

원래 UI 개발을 끝내고 연결하려 했는데 유튜브 링크를 동적으로 가져오는 부분을 확인하기 위해 서버를 먼저 연결했다.

 

정말 고난이 많았다.. 일단 웹 서버가 어떻게 구성되고 연결되는지 전혀 모른다는 것이 가장 큰 문제였다.... 검색해 봤더니 요즘은 주로 스프링을 사용하여 개발하는 것 같았고, 학교 강의자료도 미리 받아 보니 스프링으로 수업하고 있는 것을 확인했다. 그래서 나는 php를 선택했다!!!!!!!!!(?) 그 이유는 어차피 내년에 복학하면 한 학기 내내 양질의 스프링 수업을 들을 수 있으므로 다양한 경험을 위해 혼자선 php 공부를 해 보는 게 나쁘지 않다고 생각했다.

 

📍 1. 도메인 만들고 호스팅하기

우선 무료로 도메인을 만들고 호스팅 해주는 닷홈을 가입했다.

무료 호스팅에서 기본사양을 신청하면 무료로 웹사이트를 만들 수 있다.

 

📍2. 웹사이트에 파일 연결하기

'

그리고 filezilla를 사용하여 프로젝트 파일을 닷홈으로 만든 웹사이트에 업로드했다.

이때, 로그인/메인화면 페이지는 이름을 index.html으로 설정하여 제일 먼저 열리도록 하였다.

호스트 이름은 닷홈 주소, 사용자명과 비밀번호는 닷홈에서 설정한 정보, 포트는 21을 사용하였다.

 

우측의 html 폴더에 프로젝트 파일을 넣어주면 내 닷홈 사이트에서 사용할 수 있다. 이때, 첫 번째로 열려야 하는 로그인/메인화면 페이지는   이름을 index.html으로 설정하여야 한다.

 

타다~ 그럼 이렇게 웹에 파일이 잘 올라간 것을 확인할 수 있다.

비율이 저런 것은 모바일 기준으로 페이지를 만들었기 때문이다...

아직 반응형을 만들줄 모른다....

 

📍3. 데이터베이스 만들기

 

myadmin에서 테이블을 만든다. 우선 음악 추천 페이지에서 사용할 music_table을 만들었다.

속성은 name varchar(255), link varchar(255) 으로 이뤄져있다.

 

📍4. php로 데이터베이스-html 연결하기

📖 데이터베이스 연결하기

[getMusicTable.php 中]

 

$servername = "localhost";
$username = "닷홈아이디"; 
$password = "닷홈비번"; 
$dbname = "DB이름";  // 닷홈아이디와 동일하게 설정해야 함

// MySQL에 연결
$conn = new mysqli($servername, $username, $password, $dbname);

이게 안 돼서 너무 오래 고생했다... 이거 해결하느라 제일 오래 걸림

우선 servername에는 계속 닷홈 주소를 넣어서 DB 연결이 안 됐다...

servername에는 꼭 "localhost" 넣기

이랬는데도 테이블에 접근할 수 없다는 오류 문구가 떴다...

이건 검색하니까 바로 나왔음. dbname은 꼭 닷홈아이디와 동일하게 해야 한댄다...

아니면 권한이 없다고 함 !!

 

그렇게 해서 DB와 연결에 성공했다 !!

 

📖 DB에서 노래 가져오기 (select)

[getMusicTable.php 中]

// music_table에서 name과 link 열을 선택
$sql = "SELECT name, link FROM music_table";
$result = $conn->query($sql);

// 결과 배열로 변환
$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// JSON 형식으로 반환
header('Content-Type: application/json');
echo json_encode($data);

 

우선 php 파일에서 쿼리를 실행하여 결과를 배열 형태로 받고, 이를 JSON으로 넘겨준다.

 

[song.javascript 中]

		// DB에 저장된 music 가져오기
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 서버에서 받아온 JSON 데이터를 JavaScript 객체로 변환
                var musicData = JSON.parse(xhr.responseText);

                // musicData를 활용하여 원하는 작업 수행
                for (var i = 0; i < musicData.length; i++) {
                    var name = musicData[i].name;
                    var link = musicData[i].link;

                    // 비디오 객체 추하는 함수 실행 
                    loadePage(link, name);
                }
            }
        };
        xhr.open("GET", "getMusicTable.php", true);
        xhr.send();

javascript에서 getMusicTable.php를 실행하여(GET) link와 name을 가져온다.

저번 글에서 만들어 둔 loadPage 함수를 이용하여 비디오 객체를 동적으로 추가한다.

 

📖 DB에 노래 저장하기 (insert)

[song.javascript 中]

function insertData() {
            // 사용자가 입력한 값을 가져옴
            const link = document.getElementById('music_link').value;

            // AJAX를 사용하여 PHP 파일 호출
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 서버에서 받아온 응답을 처리
                    console.log(xhr.responseText);
                }
            };
            xhr.open("POST", "insertMusicTable.php", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("name=" + name + "&link=" + link);
        }

로그인 페이지로부터 넘겨받은 name과 페이지에서 가져온 link를 php 파일로 보내줘야 한다.

 

php 파일을 호출하고 xhr.readyState == 4 && xhr.status == 200 라는 수식을 쓰는데,

xhr.readyState==4는 데이터를 전부 받았다는 뜻이고,

xhr.status==200은 서버로부터 응답 상태가 성공했단 뜻이다.

즉, php 파일로 값이 성공적으로 전달되었다는 뜻이다!

 

[insertMusicTable.php 中]

// JS에서 전달된 데이터
$name = $_POST['name']; // JavaScript에서 전달된 name 값
$link = $_POST['link']; // JavaScript에서 전달된 link 값

// 데이터 삽입 쿼리
$sql = "INSERT INTO music_table (name, link) VALUES ('{$name}', '{$link}')";

php 파일에서는 전달받은 값을 테이블에 삽입한다.

 

📍5. 결과