[인턴일지] 0x07 3주차 웹 개발의 다양한 도구와 기술을 실습하기 (실무에서 사용하는 스킬 체험 : PHP, phpMyAdmin, 파일질라(FileZilla), 그리고 CMS(콘텐츠 관리 시스템))

2024년 하기 계절학기 인턴십 

회사: 창의적인 웹 디자인과 맞춤형 디지털 솔루션을 제공하는 IT 전문 기업
날짜: 2024.06.24 ~ 07.19
시간: P.M. 14:00 ~ P.M. 18:00

2024년 07월 08일 ~ 07월 12일 

이번 주 작업 일지

1. 다국어 지원을 위한 데이터베이스 설정

이번 주에는 다국어 웹사이트 구현을 위한 데이터베이스 설정 작업을 진행했습니다. 우선 phpMyAdmin을 통해 translations 테이블을 생성하고, 언어별 번역 데이터를 관리하도록 했습니다. 테이블 구조는 다음과 같습니다:

 

CREATE TABLE translations (
    id INT AUTO_INCREMENT PRIMARY KEY,
    `key` VARCHAR(255) NOT NULL,
    lang VARCHAR(10) NOT NULL,
    text TEXT NOT NULL,
    UNIQUE KEY `unique_key_lang` (`key`, `lang`)
);

 

이후 몇 개의 번역 데이터를 삽입하여 테스트를 진행

예시)

INSERT INTO translations (`key`, lang, text) VALUES
('hello', 'ko', '안녕하세요'),
('hello', 'en', 'Hello'),
('welcome', 'ko', '환영합니다'),
('welcome', 'en', 'Welcome');

 

2. PHP 코드 수정 및 번역 데이터 로드

다음으로, PHP 코드를 수정하여 사용자가 선택한 언어에 따라 번역 데이터를 로드하고 적용하는 기능을 구현했습니다. 이를 위해 _common.php 파일을 수정하여 데이터베이스 연결 및 번역 데이터를 로드하는 코드를 추가했습니다.

 

<?php
include_once('../../common.php');
session_start();

if (isset($_GET['lang'])) {
    $_SESSION['lang'] = $_GET['lang'];
} elseif (!isset($_SESSION['lang'])) {
    $_SESSION['lang'] = 'ko';
}

$lang = $_SESSION['lang'];

$sql = "SELECT `key`, text FROM translations WHERE lang = '$lang'";
$result = $conn->query($sql);

$translations = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $translations[$row['key']] = $row['text'];
    }
}
?>

 

3. 언어 선택 버튼 추가 및 번역 적용

head.php 파일에 언어 선택 버튼을 추가하고, JavaScript를 통해 번역 데이터를 적용하도록 했습니다. 사용자 인터페이스에 언어 선택 버튼을 추가하고, 선택된 언어에 따라 페이지를 다시 로드하여 번역된 텍스트를 표시하도록 했습니다.

<div id="language_selector" style="float: right; margin-top: 10px; padding: 10px;">
    <a href="?lang=ko" class="lang-link" data-lang="ko">한국어</a> | <a href="?lang=en" class="lang-link" data-lang="en">English</a>
</div>

 

<script>
document.addEventListener('DOMContentLoaded', function() {
    var langLinks = document.querySelectorAll('.lang-link');
    langLinks.forEach(function(link) {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            var lang = this.getAttribute('data-lang');
            document.cookie = "lang=" + lang + "; path=/";
            location.reload();
        });
    });

    var translations = <?php echo json_encode($translations); ?>;

    var elements = document.querySelectorAll('.translatable');

    elements.forEach(function(element) {
        var key = element.getAttribute('data-key');
        if (key && translations[key]) {
            element.textContent = translations[key];
        }
    });
});
</script>

 

4. 번역 키 추가 및 테스트

각 페이지에서 번역이 필요한 요소에 class="translatable"와 data-key 속성을 추가하여 번역 키를 설정했습니다. 이를 통해 사용자가 언어를 변경할 때마다 해당 요소의 텍스트가 번역된 값으로 바뀌도록 했습니다. 예를 들어 write.skin.php 파일을 다음과 같이 수정했습니다:

<section id="bo_w">
    <form name="fwrite" id="fwrite" action="<?php echo $action_url ?>" onsubmit="return fwrite_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off">
        <!-- 기존 코드 계속... -->
        <div class="write_div">
            <label for="wr_subject" class="sound_only translatable" data-key="subject">제목<strong>필수</strong></label>
            <input type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="frm_input full_input required" placeholder="제목">
        </div>
        <!-- 기존 코드 계속... -->
    </form>
</section>

 

결론

이번 주에는 다국어 웹사이트를 구현하기 위해 필요한 데이터베이스 설정, PHP 코드 수정, 언어 선택 버튼 추가 및 번역 키 적용 작업을 진행했습니다. 이러한 작업을 통해 사용자가 언어를 선택할 때마다 페이지 내용이 해당 언어로 번역되어 표시되도록 노력하였습니다. 하지만 아직도 원하는 대로 결과가 나오지 않아서 다음주에는 결과를 낼 수 있도록 노력하려고 합니다.