Instale PHP, Apache y MySQL en Mac sin MAMP – Parte III

Esta es la última parte de nuestra serie: Instale PHP, Apache y MySQL en Mac sin MAMP . Y si ha estado siguiendo la serie (vea la Parte 1 y la Parte 2 aquí) y ha creado proyectos en ~ / Sites, luego acceda a localhost: 8888 en el Navegador, encontrará que se muestran como se muestra en la siguiente captura de pantalla.

Soy un poco quisquilloso cuando se trata de la interfaz de usuario de las aplicaciones, y la forma en que el servidor Apache presenta las carpetas me intriga para personalizarlo, hacer que se vea mejor. Y esto es lo que vamos a hacer en este tutorial.

Si está listo, comencemos.

Empezando

Índice

Primero, creemos un nuevo archivo PHP llamado index.php justo debajo de la carpeta ~ / Sites. Luego, cree una carpeta llamada assets para almacenar archivos como las imágenes y CSS que usaremos junto con el archivo PHP, index.php .

Abra index.php en el editor de código y agregue una estructura HTML5 básica , así como algunas etiquetas HTML5 adicionales , así.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
<!DOCTYPE html>
<html>
<head>
  <title>Sites</title>
</head>
<body>
<div class="wrapper">
  <header class="site-header">
    <h1>Sites</h1>
  </header>
  <div class="site-body">
     
  </div>
</div>
</body>
</html>

Pondremos nuestros códigos debajo de divcon la .site-bodyclase.

Escribir funciones PHP

Primero, necesitamos recuperar varios datos requeridos del servidor, que son el host HTTP, el directorio actual donde colocamos la carpeta index.php y la lista de elementos que están almacenados en el directorio actual.

Aquí están todos los códigos, asegúrese de envolverlos con <?php ?>.

1
2
3
$server  = "http://" . $_SERVER['HTTP_HOST'];
$cur_dir = getcwd();
$folders = scandir($cur_dir);

Puede ver los valores en esas variables PHP con var_dumpo print_f. Por ejemplo:

1
var_dump($folders);

Esto generará la lista de carpetas y archivos que hemos recuperado con la scandir()función PHP en forma de matriz. En mi caso, se ve así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
array(12) {
  [0]=> string(1) "."
  [1]=> string(2) ".."
  [2]=> string(9) ".DS_Store"
  [3]=> string(6) "assets"
  [4]=> string(4) "demo"
  [5]=> string(3) "dev"
  [6]=> string(10) "frameworks"
  [7]=> string(4) "hkdc"
  [8]=> string(4) "html"
  [9]=> string(9) "index.php"
  [10]=> string(11) "phpinfo.php"
  [11]=> string(12) "repositories"
}

A continuación, ponemos estos elementos en la estructura de lista HTML usando PHP bucle, foreach.

1
2
3
4
5
6
7
8
9
10
11
echo '<ol>';
foreach ($folders as $folder) {
  if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;
  if (is_dir($cur_dir . '/' . $folder)) {
    echo '<li class="site-folder">'; // open list
    echo '<a class="folder-icon" href=' . $server . '/' . $folder . '> ' . $folder . ' </a>'; // folder icon
    echo '<span class="folder-name"><a href=' . $server . '/' . $folder . '>' . $folder . '</a></span>'; // folder name and link
    echo '</li>'; // close list
  }
}
echo '</ol>';

Aquí hay algunas cosas que quizás desee tomar nota de los scripts PHP anteriores:

1 if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;.. Usamos esta línea para excluir el directorio principal, que se presenta con puntos en el servidor Apache. También excluye los activos que usamos para almacenar CSS e imágenes para personalizar la apariencia del localhost .

Como referencia, puede dirigirse a los documentos de PHP sobre la continuefunción.

2. La estructura de la lista HTML está encapsulada con una if (is_dir($cur_dir . '/' . $folder))función condicional, de esa forma solo generará carpetas.

Abra localhost: 8888 en el navegador y obtendremos el siguiente resultado.

Escribiendo el CSS

Antes de empezar a escribir CSS, vamos a descargar Mac pequeño icono de carpeta y la carpeta Mac OS X . Abra los archivos en Photoshop, guarde los iconos en formato PNG y colóquelos dentro del directorio / assets / img.

Luego, cree un nuevo archivo de hoja de estilo en el directorio / assets / css.

Además, incluya el enlace en el archivo index.php .

1
<link rel="stylesheet" href="assets/css/style.css">

Estilos básicos

Primero pongamos los estilos básicos para los elementos HTML. Estos incluyen establecer el tamaño de la caja en border-box, para que podamos decidir y medir fácilmente el tamaño del elemento. También configuramos la familia de fuentes y mostramos la lista HTML en línea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
*, *:before, *:after {
  box-sizing: border-box;
}
html {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  text-align: center;
}
body {
  margin: 0;
  padding: 0;
}
ol, ul {
  padding: 0;
  margin: 0;
}
ol li, ul li {
  display: inline-block;
  margin: 0 20px;
}
ol a, ul a {
  text-decoration: none;
  color: #000;
}

Tenga en cuenta que omitimos el prefijo del proveedor del navegador para acortar los códigos. Pero lo hemos incluido en el código fuente que puedes descargar al final de este tutorial.

Encabezado de página

Imitaremos el esquema de color de OS X para que la apariencia se ajuste bien. Entonces, para el encabezado de la página, le daremos un degradado con un esquema de color gris y dejaremos el pequeño ícono a un lado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
.site-header {
  height: 30px;
  width: 100%;
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
  line-height: 2.5;
  margin-bottom: 50px;
}
.site-header h1 {
  color: #000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.8em;
  font-weight: 400;
  margin: 0;
}
.site-header h1:before {
  content: url('../img/folder-sm.png');
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  position: relative;
  top: 2px;
}

Las carpetas

A continuación, mostramos la carpeta OS X en la lista de elementos que hemos generado con PHP, anteriormente. Los siguientes códigos CSS también incluyen los estilos cuando pasamos el cursor por la carpeta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.site-folder {
  position: relative;
  width: 145px;
  height: 132px;
}
.site-folder .folder-icon {
  display: block;
  height: 100%;
  width: 100%;
  background-image: url('../img/folder-128.png');
  background-repeat: no-repeat;
  background-position: center top;
  border-radius: 5px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.site-folder .folder-icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.site-folder .folder-icon:hover + .folder-name {
  background-color: #2b5dcd;
}
.site-folder .folder-icon:hover + .folder-name a {
  color: #fff;
}
.folder-name {
  border-radius: 24px;
  font-weight: 400;
  font-size: 0.8em;
  text-transform: lowercase;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
}

Hemos terminado. La captura de pantalla siguiente muestra el resultado final cuando vemos localhost: 8888 en el navegador.

Conclusión

Hemos completado la serie que vino en 3 entregas. Para resumir:

  1. En la primera parte, hemos establecido y configurado PHP y Apache .
  2. Luego, instalamos MySQL y lo administramos con Sequel Pro, en la segunda parte.
  3. En este tutorial, que es la última parte, personalizamos la presentación de la carpeta en localhost .

Esperamos que estos tutoriales le resulten útiles. Si tiene alguna pregunta con respecto al tema discutido, no dude en poner su pregunta en el cuadro de comentarios a continuación.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *