[Web] Bootstrap 예제 목록 만들기

다른 php 에 기능 추가해 사용하기 

getbootstrap.com/

Bootstrap

Bootstrap 은 웹 UI 구성을 도와주는 프레임워크 정도로 알고 있다. 앞으로 구성할 웹의 UI 는 대부분 이걸 사용할 예정이다.

header 영역에 다음과 같이 bootstrap.min.css 를 링크시켜 사용한다.

사용 방법은 여러가지 방식이 있는 듯 하지만, 여기서는 css 와 js 파일을 다운받아 직접 링크를 걸고 사용한다.

아래는 href 값은 작성한 파일로 부터 bootstrap.min.css 파일이 있는 상대 경로를 적어준 것이다.

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

 

별도로 Bootstrap 예제 파일도 배포하는데, 이 예제 파일들도 다운 받아 같이 사용하기로 했다.

필요한 부분을 문서를 찾아가며 작업할 수 도 있지만 예제를 포함해 두는 것도 좋을 것 같아서 이기 때문이다.

하지만 예제의 양이 많아 하나씩 링크를 수동으로 만들어 주거나 일일이 주소를 쳐서 들어가기는 어렵다.

그래서 예제를 모아둔 경로 중, index.html 파일들이 있는 경로를 뽑아내 리스트화 시키고 링크 목록으로 출력하고자 한다.

우선 php 를 통해 특정 경로의 파일 목록을 가져오는 기능이 필요하다.

php 를 잘 모르니 해당 기능을 하는 function 을 구글링 해서 가져왔다.

<?php
    function getDirContents($dir, &$results = array()) {
        $files = scandir($dir);

        foreach ($files as $key => $value) {
            $path = realpath($dir . DIRECTORY_SEPARATOR . $value);
            if (!is_dir($path)) {
                $results[] = $path;
            } else if ($value != "." && $value != "..") {
                getDirContents($path, $results);
                $results[] = $path;
            }
        }

        return $results;
    }
?>

위 기능은 system.php 라는 별도의 파일로 작성 하였다.

이제 bootstrap 예제를 출력해 주기 위해 메인 페이지인 index.php 에서 위 함수를 호출해 보기로 한다.

php 에서 다른 파일의 기능을 사용하기 위해서는 아래와 같이 nclude "파일경로" 를 사용한다고 한다.

include 'system.php';

 

아래는 include 를 사용해 예제 버튼들을 출력하는 코드이다.

위의 기능을 그대로 사용하면 절대 경로가 출력되기 때문에 전체 경로에서 index.html 의 상대 경로와 폴더명만 추출해서 출력해주도록 변경 해 주었다.

그리고 버튼 타입으로 출력 해주기 위해 echo 에 html 스크립트를 같이 출력해 주는 형태로 구현 하였다.

<?php
	include 'system.php';
    $root='/bootstrap-example/';
    foreach(getDirContents('.'.$root) as $path) {
    	if (strpos($path, 'index.html') !== false) {
        	$link=str_replace(getcwd().$root,'',$path);
            $name=str_replace('/index.html','',$link);
            echo "<li><a href=\"".$root.$link."\" class=\"btn btn-primary my-2\">".$name."</a></li>";
         }
    }
?>

깔끔하진 않지만 일단 구현하고자 하는 기능은 완성.

이 다음은 Google OAuth 기능을 사용해 로그인 하는 첫 화면을 구성해 보려 한다.