>> COLUMNA 1: Todos, non benvidos de volta.
É dicir CS50.
E este é o comezo de semana nove.
E isto é o inicio do resto seu tempo no CS50, no que
transición agora, por fin, a tea aspectos do curso, onde se
descubrir que moitos dos fundamentos que temos que chegou a exportar a semana
aínda volver a visitar, ou asombrar, nós.
Pero agora, vai descubrir que el é un orde de magnitude máis fácil
realizar determinadas tarefas e resolver certos problemas -
tanto que aínda que penso determinados conxuntos de problemas eran divertidos no seu
propia maneira, eu creo que vai atopar que p axuste 7, p axuste 8, e entón,
en definitiva, o proxecto final será todo o máis gratificante, porque vai
considerar que comezamos a tomar para concedida agora as cousas como xestión de memoria e
punteiros, e que está a suceder por baixo do capó.
E, de novo, temática, durante todo o semestre foi tan capas
e capas.
E agora estamos especie de up aquí, de pé sobre a
ombreiros de semana pasado.
>> Agora, lembre-se a última vez que falou sobre como a Internet funciona.
E ese foi, quizais, un simplificación, pero lembre que
todos os ordenadores do mundo ten un IP resolver, a pesar de que é un pouco de un
simplificación aínda.
E estes enderezos son usados ​​exclusivamente para máquinas, de xeito que identifican
cando envía información, ou paquetes, por así dicir, que poden ter unha orixe
enderezo e un enderezo de destino.
E eses mesmos enderezos IP poden ser usados tanto para o ben e tamén para o mal,
para rastro-lo, por exemplo.
En realidade, cada un de vós cun portátil abrir agora, ou un teléfono no seu
bolsa, ten un enderezo IP na rede de Harvard.
E non é tan difícil de correlacionar isto con quen e onde se
son estes días.
Pero máis sobre iso quizais no futuro.
>> Agora eu pensei en traer de volta algunhas memorias de [? mellorar?] e darlle
outro clip dun concerto que pode atopar familiar.
Se puidésemos reducir as luces por só uns segundos.
O show Numb3rs.
>> COLUMNA 2: É un enderezo IPP4 32 bits.
>> COLUMNA 3: IPP, como en internet?
>> COLUMNA 2: rede privada.
A rede privada da Amita.
Ela é tan incrible.
>> COLUMNA 3: Imos, Charlie.
>> COLUMNA 2: É.
Un enderezo IP espello.
Ela está deixando ver o que se está facendo en tempo real.
>> Speaker 1: OK, entón algunhas cousas de malo con esta foto.
Entón, un, e este é aceptable, esta é realmente
non é un enderezo IP válido.
Un enderezo IP válido ten que ser números da forma w.x.y.z, onde cada un de
esas cartas é de 0 a 255.
Pero iso é bo, porque así como o películas onde os números de teléfono falsos,
eles falsificam enderezos IP.
Realmente non alcanzou os servidores reais.
>> Pero lembre, este é un navegador.
E navegadores non comezar saída código de ordenador así.
E se miramos un pouco máis, teña en conta que a linguaxe que está a ver
na pantalla é unha linguaxe chamada Objective C, que é a lingua en
que aplicacións para iPhone están escritas, particularmente os que envolven
lapis de cor, como se pode ver dende o código de fonte aquí.
>> OK, eu penso que iso era divertido.
Entón, ese fragmento de código ten absolutamente nada que ver co que esta
determinado episodio era sobre.
Polo tanto, a broma é unha especie de sobre os pobos levando a este concedida.
Pero iso non é tan difícil de obter eses detalles técnicos correctos.
E gustaríame incentivos-lo.
E, de feito, o 50 pode moi ben romper unha morea de concertos de televisión e películas ou
porque vai considerar que é só non é posible que están
facendo na pantalla.
Pero, en realidade, este é o código que pode velo nunha aplicación para iPhone
ou aplicación de Mac OS.
Non ten nada en todo que ver con seguridade.
Polo tanto, manter un ollo para fóra para máis esas cousas divertidas como esta.
>> Pero hoxe nós comezamos a mergullo en realidade profundamente a toda unha gama de linguas.
Un feito, un dos máis ampla temas desta porción do
curso non é para aprender a programar en PHP, non para aprender SQL, por si só, non
aprender JavaScript, por si só, pero en vez para ensinar a si mesmo como ensinar
yourself novas linguaxes, porque, de feito, comezamos a tomar agora a
Rodas pequenas para que despois final do curso, non espera que a 20
especificación páxina para dicirlle como aplicar algún programa.
Ten ingredientes suficientes na súa mente, e ferramentas suficientes na súa ferramenta
Kit, coa cal comezar a construír solucións a problemas de interese
ti por algún grupo de estudantes, para algúns proxecto de investigación, ou realmente nada
do seu interese.
>> Entón, para iso, lembre que este era a imaxe que deseñou última vez.
E isto é dous ordenadores, cliente e cortar, falando uns cos outros.
E o protocolo, a linguaxe, co fin de falar, que estes dous ordenadores ocorrer
estar falando chámase HTTP.
E iso é só o protocolo usado polo ordenadores para transferir información sobre
a World Wide Web.
A web, claro, é só un servizo que roda encima do
chamado internet.
Que é outro servizo dispoñible en parte superior da Internet nos días de hoxe?
Algún outro protocolo ou - o que é iso?
>> Audiencia: FTP.
>> COLUMNA 1: FTP.
Entón File Transfer Protocol é outra.
A maioría de vostedes probablemente non telo usado.
Pero a maioría de vostedes probablemente xa usado cousas como Gchat ou instantánea
Mensaxes dun modo máis xeral, seguro electrónico.
E aqueles, tamén, son os servizos que son executados en arriba de Internet, xa que, no
final do día, a propia Internet realmente é só incorporarse os datos do punto A ó
punto B. E el usa unha serie de as partículas en si, un ou dous deles
deles máis xeralmente chamado o TCP / IP, que é para dicir que un ordenador
Internet realmente pode estar facendo cousas diferentes, correo electrónico,
e web, e así por diante.
Google fai unha morea de presente.
Entón, como son os servizos en exclusiva identificado, non podemos dicir que, nun computador
que realmente pode estar facendo varias cousas?
>> O número do porto.
E estes son só humana arbitraria convencións como 80 é web, 443 é
web cifrada, 25 e correo electrónico.
E hai un acios doutros.
E eses números son simplemente incluídos na os paquetes de información, os
Sobre virtual, que efectivamente contiña unha petición ou unha resposta.
>> Entón, cando recibe de volta unha resposta do web, normalmente, non ve calquera
números de calquera natureza en termos de código de estado da resposta.
Realmente non ve a funcionamento interno do
paquetes que veñen de atrás.
Pero 200, de feito, significa Aceptar.
E isto significa que está todo ben.
Pode ver unha chea deles.
Que é probablemente a máis común xa viu na web?
>> 404.
Significa só que arquivo non se atopou.
Isto significa que alguén errou.
Fixeches por erros de dixitación da URL, ou alguén máis fixo, dándolle un
URL non válido, ou que excluíu a ficheiro ea URL é aínda
a ser usado por persoas.
Así, calquera número de razóns poden explicar por que un arquivo non se atopou.
E vai ver, nas próximas semanas, eses outros códigos de erro, e vai
sacar proveito dalgúns deles.
O peor é 500.
Se recibe un erro 500 no código que escrito, pense nisto como unha especie de
análogo da SEG fallos no mundo de programación web.
El non é tan terrible.
Pero iso significa só que, en algún lugar, vostede errou.
Entón mire para adiante a eles.
>> Pero imos ver se podemos velos en contexto.
Déixeme ir a un navegador aquí e faga o seguinte.
Polo tanto, este é o Chrome, que pasa a instalarse no aparello.
Pero a maioría todos os navegadores hoxe en día ten algunhas funcións equivalentes.
Eu estou indo a ir ata o menú de Chrome, e vaia a Ferramentas, e eu estou indo a ir
a Developer Tools.
E vai ver que este panel pouco ábrese na parte inferior da ventá.
Outro atallo, para ser honesto, que eu eu costume usar é premer co botón dereito
ou de control prema en calquera lugar na web páxina e vaia Inspect Element.
E que non só abre isto ten para ti.
Tamén estará aberto, especialmente, a porción en Elementos
o lado esquerdo.
>> Entón, nós estamos, por suposto, a ver Google.
Cambiaron o seu logotipo hoxe.
Pero se eu rolar por aquí, teña en conta que baixo Elements, ve
o que se chama HTML, de formato Linguaxe, e esta é a linguaxe
que esta e todas as páxinas web, realmente, está escrito dentro
Pero en realidade é formatado para nós moito máis lexible
do que normalmente é.
En realidade, se eu reducir o zoom, e eu, en vez simplemente prema co botón dereito ou Control Preme
faga clic sobre a páxina, e logo vaia en Ver Páxina Fonte, que é literalmente o que
Google enviou ao meu navegador.
>> Entón, algunha persoa ou persoas escribiron Google.com utilizando este código fonte.
A maior parte deste non é HTML.
É realmente unha linguaxe chamada JavaScript, que
nós imos chegar a mércores.
Pero Chrome, e que cada navegador pode facer por nós, é unha especie de ver
pasado todas as distraccións do sintaxe tolo, e volva a colocar espazo en branco
para nós, e mesmo destaque de sintaxe, ou colorear as cousas para nós.
Entón podes ver que os chamados ferramentas de desenvolvemento construído en navegadores
pode facer a súa vida moito máis fácil porque pode explorar, a través deste menú
interfaz, exactamente o que o subxacente código fonte é a
calquera páxina en internet.
E, de feito, esta é unha das máis formas eficaces para aprender a facer
algo novo, polo menos, se a páxina non é tan complexa como a mergullar, é
para comezar a picar arredor é HTML, ollar na súa chamada CSS, que virá
a un bit, así como, para obter unha a comprensión de como ese programador
aplicaron un especial característica da páxina.
>> Pero o máis interesante tecnicamente dereita agora é que vai ser iso.
Se eu vaia á pestana Rede, agora imos limpar isto.
Eu estou indo a premer a pequena atravesar símbolo aquí, e, a continuación,
ir a outro sitio.
E eu só vou escribir en Facebook.com.
O HTTP, HTTPS non, non WWW.
Imos realmente ver o que pasa aquí.
>> Intro.
Agora, teña en conta unha morea de cousas só apareceu neste panel de fondo, en
Ademais da páxina web aparecendo na parte superior.
Eu estou indo a ir ao seu Guía rede aquí, e eu vou
clic na primeira liña.
O que esta ferramenta vai revelar-nos é cada unha das peticións HTTP
que axiña só volveu e outro entre o meu navegador
eo servidor de Facebook.
E así, cada unha destas liñas representa un tal solicitude, ou
resposta, un ou máis dos aqueles sobre virtual.
Ou máis casualmente, é como unha persoa como unha persoa, un cliente nunha
restaurante, pedindo algo de novo, e de novo, e de novo.
E o camareiro continúa traendo de volta un de cada vez.
>> Entón, agora, se eu aumentar o zoom en tanto, teña en conta e este será o tipo de cousas
que está Benvido ao e animou xogar coa súa propia, porque nós
non vai pasar por todo en gran detalle.
Mais repare que hai unha algúns sub pestanas aquí -
Cabeceiras, Preview, resposta, Cookies, e timing.
Eu só vou mirar cabeceiras de momento, porque estes son pouco
ingredientes dentro do sobre que axudar a obter datos para e de lugares.
>> Entón, primeiro, déixeme prema neste, Vista Fonte próxima á petición cabeceiras.
Non é a solicitude que o meu navegador, Cromado, neste caso enviado en
que o sobre virtual.
Ten que lembrar, a semana pasada escribiu mentres a man
finxindo ser un navegador.
A continuación, el recordou que o servidor é ollando para o servidor chamado
Facebook.com.
E entón hai algo máis misterioso información que imos acenar
nosas mans agora.
>> Pero se eu comezar a rodar agora en Nesta ventá, déixeme chegar ao
cabeceiras de resposta.
Iso era o que é o virtual Sobre que volveu de
Facebook.com.
E se eu premer en Ver o código fonte só para ver o texto bruto do mesmo,
entender algunhas cousas.
Un deles, Facebook tamén fala a mesma protocolo, a versión 1.1 da mesma.
Entón, iso é bo.
Pero o código de estado 301, movido permanentemente.
>> Ben, onde diaños Facebook ir?
O que esta tentando pasar para nós?
Así, entende-se aquí non hai outra cabeceira chamado Localización.
Entón, por que é Facebook me dicindo que eles movido permanentemente para que URL
xunto a localización?
Esquecín o www.
>> Entón esa foi a miña elección.
De feito, a maioría de nós raramente, probablemente, escribir www.whatever.com estes días.
Pero resulta que un administrador de sistema, como Facebook do, pode
configurar os seus servidores de tal xeito que ou Facebook.com funciona, ou
www.Facebook.com funciona, ou, realmente, tal prefixo fronte da súa
nome de dominio.
Entón, eles fixeron iso por nós.
E eles están nos redirección, probablemente por algunha técnica,
algunhas razóns de marketing.
Eles só queren canonizar en www.Facebook.com.
>> Pero isto non é así iso.
Se eu rodar aquí, imos mira o que acontece.
Isto está me dicindo que movido permanentemente a
http://www.Facebook.com.
Entón, imos ollar para a segunda petición que o meu navegador envía.
Desafortunadamente, parece que Facebook mudouse novamente porque a segunda
solicitude, seleccionando esta URL no seu lugar, di que, tamén, cambiou-se
permanentemente.
E déixeme rolar aquí para as cabeceiras de resposta.
Onde ten Facebook foi agora?
>> Entón HTTPS.
Entón agora Facebook comezou, especialmente á luz da actual
eventos nos últimos meses, en especial e Tamén no último par de anos
para obrigar a todos os seus usuarios, nun bo Así, o uso de HTTPS, que é máis
seguro, aínda que non totalmente segura.
E agora a miña páxina, o meu navegador é vai solicitar esta terceira URL.
E agora, por fin, temos o doutro xeito invisible 200 Aceptar.
>> Entón, o que no mundo, ou todos estas outras liñas aquí.
Eu literalmente escribiu unha cousa, e miña navegador parece solicitado como
20 cousas estrañas.
¿Que é iso?
>> Audiencia: Scripts?
>> COLUMNA 1: scripts, para que outros arquivos escritas nunha linguaxe chamada
JavaScript, o que, unha vez máis, nós imos ver un pouco o mércores.
Que máis?
As follas de estilo.
Entón, algo nunha linguaxe chamada CSS, o que veremos de aquí a pouco.
Gifs, e JPEG e pngs e imaxes, e arquivos de película - o que unha páxina web
É máis probable que en a forma dun arquivo.
E así, o que estamos a ver na esquerda banda, hai todos os ficheiros
que Chrome tivo que baixar, recursiva, se quere, a fin de
compoñer a totalidade da páxina.
>> Entón, o que vimos hai pouco con Google, se eu facer clic sobre os elementos
tab, este, con certeza, é a HTML, o linguaxe que compón esta páxina.
Pero hai acios de outras cousas.
Hai un logotipo.
Hai quen azul-ISH iconas alí.
E hai outros elementos aínda en a páxina que se pode
arquivos separados.
>> Entón, o que é agradable sobre un navegador é que ten en conta a linguaxe que vai
para comezar a escribir, ou xa escrita comezou en I set 7, figuras
de onde estes arquivos vivir e vai e agarra-los tamén.
E eu non podo salientar o suficiente, mesmo aínda que algúns isto pode parecer un pouco
arcano ou esmagadora, a primeira vista, aprender a programar
aplicacións para a web, é inestimable para entender como estes
pequenas ferramentas de traballo.
Trátase de unha especie de como GDB como ferramentas, pero moito máis sinxelo, en definitiva, para usar -
e realmente dálle os ollos para o que temos que chegou a tomar para concedida para
algún tempo agora.
>> Entón o que podemos facer agora con esta información?
Ben, imos realmente un ollo Os conceptos subxacentes ás HTML.
E imos adiar, como xa temos, para seccións esta semana, para o problema
axuste 7 especificación, a algúns dos máis peculiaridades de linguas.
Pero imos ver se non podemos pintar un imaxe do que ten que entender
xeral aquí.
>> Entón, HTML, HyperText Markup Language, non é unha linguaxe de programación.
O que isto realmente significa?
Así HTML coma este.
E algúns de vós xa saben diso.
Algúns de vós teñen benvida a facer iso hai algún tempo.
Pero imos ver se a xente non pode encher algunhas lagoas ben.
Entón, teña en conta algunhas cousas aquí.
Un deles, é só texto.
Así é como o código fonte en C, ou dalgún outro idioma.
>> Teña en conta que non parece ser un estándar aquí.
Non hai retroceso, pero técnicamente a retirada é só humano
convención.
A navegadores non importa se hai novo liñas e guías como vemos alí.
Pero teña en conta que non hai simetrías aquí.
Non é o que eu chamo, na parte superior do este ficheiro, a etiqueta aberto, ou o inicio
etiqueta, chamado HTML.
E entón, alí en baixo, perfectamente aliñados anterior, así como facemos con chaves,
vemos apoio aberto, para adiante slash, HTML, preto do soporte.
Entón ese é o correspondente preto tag, ou no fin tag, para aquela cousa.
>> Xuntos, todo dentro do o chamado tag abrir e pechar tag
compoñer o que imos chamar de un elemento.
E nós imos ver, en só un momento, é Realmente me gusta dun nodo nunha árbore.
Porque se pensar agora a retroceso que está implícito aquí,
medio que ten, así, un avó no chamado HTML.
Cantos fillos pode dicir, baseado nesta imaxe, o elemento HTML ten?
>> Entón, probablemente dous.
Un deles é o elemento principal, aparentemente.
E é o elemento do corpo.
E por dous fillos?
Ben, eu son só un tipo de inferencia que se Eu teño unha marca de cabeza aberta e, a continuación, un
tag cabeza estreita, que é un elemento.
E entón, se hai outro corpo aberto etiqueta e unha etiqueta corpo preto, é como
outro elemento.
Así, no sentido de que se eu tipo de rotación a imaxe do seu lado, é
como ter unha etiqueta HTML, e despois un tag cabeza, e entón unha etiqueta corpo, e
logo algún texto, Ola mundo, oscilando fóra da propia etiqueta body.
>> Así, podemos deseñar un cadro que pode ser así.
As formas son arbitrarias.
Pero teña en conta que eu usei unha especie de elipse na parte superior para representar o
documento en si.
Acontece aí fóra, pode ser outra cousa dentro dunha páxina web que eu non teño
trazada aquí.
Entón imos ata colgar o HTML fóra de nodo un chamado nodo documento.
E entón temos cabeza e corpo e título, previo aviso,
que está aninhado máis.
Non me incomoda poñer liña adicional rupturas dentro da etiqueta title.
El só parecía que estaba quedando un pouco detallado.
Entón eu deixei el nunha liña alí, con Título aberta, Ola Mundo, próximo título.
E entón temos algún texto pendendo fóra de aquí.
>> Polo tanto, esta imaxe vai voltar nós cando mergullo Javascript.
Ea comprensión de que, cando escribir HTML como esta, o que
é un navegador facendo?
Ben, nós non temos que preocuparse como está facendo iso, ou co que
algoritmo, pero ao final do día, cando un navegador recibe HTML como
que, de Facebook ou Google, el analiza é, por así dicir, le-lo,
con algo como fread, de arriba abaixo, de esquerda a dereita, e como
entende, oh, etiqueta aberto e peche etiqueta, el comeza a malloc, por así dicir,
un nodo nunha árbore.
E cando atopa, como xa implícita aquí co retroceso, un
nó fillo, mallocs un nó para que e adxunto para que a árbore.
>> Así, a estrutura de árbore, árbores binarias, árbores ternários, e árbores máis grandes, que
que mirou para unha ou dúas semanas, o aviso que é o mesmo principio
Voltar a nós.
E quen aplicado, o que Chrome equipo fixo que, presuntamente, tiña
para aplicar algún tipo de estrutura de árbore debaixo do capó.
E iso en si é, probablemente, nun linguaxe como C, C + + ou, ou unha menor
linguaxe de nivel que imos agora utilizar na parte superior da web.
>> Entón, agora, quizais iso vai facer máis sentido.
Tatuaxe real dun cara que pode arrepentir, finalmente, un pouco.
OK, todo ben, entón unha chea de humor web.
Non está realmente a suceder sobre tan ben hoxe.
Entón, imos seguir adiante.
Todo ben.
>> Entón, imos dar un ollo agora nalgúns exemplos.
O máis sinxelo posible cousa pode ser iso.
Eu estou indo a ir adiante e abrir en gedit un arquivo chamado hello.php.
E aquí dentro, eu vou rápido só iso, printf, citar
unquote, "Ola mundo".
>> Así, o previo aviso, e eu vou facer a miña barra invertida n, Non teño preocupou en declarar principal.
Acontece que, en php, e unha morea de idiomas, non precisa de un principal
función de per se.
Pode simplemente comezar a escribir seu programa.
Agora, cando gardar o ficheiro, repare que eu son terá que facer o seguinte.
Eu non vou usar make, e eu non son vai utilizar bumbum porque PHP, a diferenza
C, non é unha linguaxe compilada.
É o que se chama de interpretación linguaxe, o que significa que executa-lo
como unha entrada a través de outro programa chamado un intérprete.
E este programa le-lo, de arriba abaixo, de esquerda a dereita, e forma
o que diga a el para facer.
>> Polo tanto, neste caso aquí eu teño unha liña que di printf.
Entón, cando executar este código fonte, ola.php, a pesar dun programa que
ocorre, cómodo, a ser chamado de PHP, este programa PHP vai ler
este ficheiro, de arriba a abaixo, de esquerda a dereita, e vai facer o que me
diga a el para facer - a execución de código, e se el non recoñece algo, só
cuspídela.
Entón, eu estou indo a ir adiante e executar PHP de hello.php.
Intro.
>> E iso non é moito o que eu pretendía.
Ben, por que isto?
Ben, PHP é unha linguaxe que é realmente deseñado para ser moi
confúndese coa web.
Ao facer páxinas web con esta linguaxe PHP, como veremos en breve, imos
quero facer algo parecido con impresión as liñas como esta.
>> Entón eu vou facelo.
Abra o soporte, punto de interrogación, PHP, e agora eu só vou recuar só para manter
cousas boas.
E agora eu vou facer unha pregunta marcar preto do soporte.
Polo tanto, hai un pouco de asimetría aquí.
Non fai iso.
E non fai un corte, de xeito PHP é un pouco diferente.
>> Pero agora, se eu reprise deste programa, PHP hello.php, agora
realmente obter Ola Mundo.
E nós imos ver por que iso é valioso.
Un deles, que me permite especificar, Super explicitamente, trátase
código, realizar iso.
E iso é realmente o que estas etiquetas especiais implica aquí.
>> Pero iso tamén significa que, se eu só fago algo así como o meu obxectivo aquí, que
quere dicir que, literalmente, que só ser impresos sen necesidade de
realmente chamar printf, ou impresión, ou calquera outra función similar.
Entón, imos volver ao que en só un momento.
>> En primeiro lugar, imos facelo.
Dentro do aparello, temos unha directorio chamado VHosts, para o Virtual
Exércitos, cortar servidor local, cortar público.
Entón é un pouco prolixo, pero longa historia En resumo, o aparello non foi deseñado
só para apoiar C. Tamén é deseñado para soportar PHP.
Pero tamén está deseñado para ser un web servidor, e un servidor de base de datos.
E el está deseñado, e verdadeiramente configurado, para ser reminiscente de ningunha
comercial da empresa de hospedaxe que pode pagar R $ 5 por mes para,
100 dólares por mes para.
Sexa cal sexa o servizo é, está configurado sexa moi semellante a un
servidor de produción no mundo real.
>> E o que significa isto é que a execución en o aparello é un software de servidor web.
Ela pasa a ser chamado de Apache.
É só libre e de código aberto, e moi popular.
E nós configuran Apache saber que se eu visitar unha determinada dirección, con
Chrome ou calquera navegador dentro do aparello, a mirar para este directorio
para os arquivos que o usuario está pedindo.
>> Noutras palabras, déixeme dalle faga iso.
Dentro do meu directorio público, vou para ir adiante e crear un ficheiro
chamado index.html.
Tanto me dá a guía aquí.
E eu estou indo a ir moi rápido e dalle bater a fóra
este programa.
DOCTYPE HTML, o que, de momento, só supoñer que ten que escribir.
É só unha etiqueta arcano, que non é realmente unha etiqueta HTML, que especifica que
aquí vén un pouco de HTML.
>> Eu estou indo a ir adiante e volver a crear o que vimos hai pouco.
Aquí está a cabeza da páxina.
Dentro da cabeza era o -
así título.
Entón, imos dicir Ola, mundo.
E entón para acá foi a marca do corpo.
Déixeme pechar a etiqueta body.
E entón, aquí eu tamén vou dicir, só para maior claridade, Ola mundo.
>> Polo tanto, esta é, sen dúbida, o máis simple posíbel páxina web vostede
pode facelo é válido.
É sintaticamente válido.
Todo o que está aberta é pechada.
Todo está ben en estilo e recuado.
Entón, imos ver agora como eu Pode acceder a este ficheiro.
>> Ben, deixe-me ir para Chrome aquí.
E deixe-me ir http://localhost/index.html.
Entón o que é servidor local?
Así, a maioría de calquera ordenador do mundo, Linux, Mac OS, Windows, ten un apelido
chamado servidor local.
Entón, se quere falar para o seu propio ordenador -
aínda que, estrañamente reflexivamente -
se chama servidor local.
Non importa o que o seu ordenador actual é chamada, sexa MacBook de David
Aire, ou algo máis detallado coma este.
>> Polo tanto, este URL é, ao parecer, vai utilizar o HTTP para falar co servidor local,
no mesmo ordenador, o dispositivo, e que vai pedir, simplemente dar unha
creo, que arquivo?
Index.html.
Así, o aparello foi configurado no avanzar saber que, se eu estou pedindo
a algo como index.html, busque nunha carpeta chamada VHosts, nun
cartafol chamado localhost, nunha carpeta aí chamados público.
É aí que todo o meu público ficheiros van ser.
Entón, eu estou indo agora prema Intro.
>> E, caramba, non é que prohibido mensaxe, tamén coñecido como 403, o
código numérico para iso.
Entón o que está mal aquí?
Ben, non é suficiente só para poñer o ficheiro dentro da miña carpeta.
Eu teño realmente facer o seguinte.
>> Déixeme ir ao meu directorio VHosts, en localhost, en público, e que
facerme ls trazo l.
E hai algunhas outras cousas aquí para fins de hoxe.
Mais repare no lado esquerdo, xunto para index.html vemos só un RW.
E, no pasado, o que ten RW representaba?
>> Só ten que ler ou escribir.
O feito de que el di rw á esquerda Significa que, o propietario deste arquivo, pode
ler ou escribir.
Pero eu teño que todas as persoas no mundo ler isto, pero non escribilo.
Entón, eu vou cambiar o modo de arquivo, chmod, todo para dar máis r
todo permiso de lectura no arquivo chamado index.html.
>> E se eu agora redigitar ls trazo l, teña en conta que, por aquí, un pouco máis
R da xurdiron.
E, de momento, a especificación vai en máis detalle.
Para P set 7, que quere dicir que todos agora pode ler este ficheiro.
Se eu atrás para o meu navegador agora e actualizar, listo.
Ola, mundo.
>> E podo incluso abrir miñas ferramentas de Chrome para ver, así como con Google e
Facebook que non é o meu HTML, formato algo
diferente e cores.
Se eu vaia á pestana de rede e recargar a páxina, teña en conta que hai a chegar
solicitar que Chrome é o envío de ao dispositivo.
Hai o 200 para que arquivo específico.
Entón, en suma, é así que todos estes varias pezas están encaixando.
O que pasa é que o servidor web estamos usando agora non é remota,
como Facebook.
É literalmente o mesmo ordenador, o que é perfectamente Aceptar.
>> Entón, o que máis podemos facer nunha páxina web?
Ben, só, imos brisa través un par destas cousas.
Pero déixeme ir adiante e reabrir Gedit con index.html.
E déixeme ir adiante e dicir Hola CS50, salve este ficheiro, volva para o
navegador, moi por baixo do esperado cambio.
>> Pero o que se quere, de feito, obrigar a algo agora?
Así, verifícase que podemos ter a ligazóns HTML que son só marcas
si.
Ela pasa a ser chamado tag ancora. a href igual
https://www.cs50.net, www.cs50.net seguinte cita, preto do soporte.
E agora imos ver o que resto ven xunto.
>> Abrín a etiqueta.
Agora eu teño que darlle unha frase como CS50.
Déixeme pechar a etiqueta.
E conta algunhas cousas.
Aínda que non hai esa cousa enigmática aquí, eu non teño repetido cando
pechar a etiqueta.
Acaba de pechar a etiqueta co seu nome só.
E iso é o que se coñece como un atributo cun valor.
Atributos só modificar o comportamento dalgunha etiqueta dentro dunha páxina.
>> Polo tanto, esta é a especificación de que a amiga referencia o xeito elegante de dicir o
URL para esta áncora con esta ligazón, debe ser CS50.net.
E o texto que queremos mostrar a usuario non é que URL cru, senón
a palabra CS50.
>> Entón, se agora eu actualizar, déixeme zoom in para claridade, déixeme volver cargar a páxina,
ter en conta que temos esa vella escola subliñado azul ligazón.
E se eu pasar o rato sobre el, e que vai ser difícil de ver, na parte inferior esquerda
esquina da pantalla, teña en conta que di que a URL á que
Eu estou indo a ir.
E se eu facer clic alí, listo, agora eu estou facendo páxinas web.
E nós levounos á páxina de inicio.
>> Pero teña en conta que potencia este nos ofrece.
A seguridade é moi en voga nos días de hoxe.
E se eu, no canto dicir algo así como iso, e eu en vez de ir para, por exemplo, imos
ver, fakeCS50.net.
Volva a esta páxina.
>> OK, así que ter en conta que aínda parece que estou vai CS50, a menos que un ollo astuto
Vai notar que eu estou indo a CS50 falso.
Estou supoñendo que este dominio non se toma.
OK, entón non está dispoñible.
Entón, iso é bo.
Ninguén realmente ten ese dominio.
>> Pero imos ser un pouco máis malicioso porque ese é o tipo de estúpido.
E se a xente cambiar isto para Paypal.
E se chamamos este tipo, www.paypal.badguy.com,
calquera que sexa o seu dominio é.
Isto probablemente existe.
Entón, agora déixeme volver cargar a páxina.
E aquí temos unha especie de phishing ataque, P-H-I-S-H-I-N-L, que é o
palabra parvo xa para un ataque que intenta información peixe, ou, mellor
aínda, diñeiro, das persoas, enganando los para proporcionar información que
eles non poderían facer.
Isto parece totalmente lexítimo, non?
Debo ter unha ligazón aquí para Paypal.com.
Para ser xusto, se eu sexados-lo con algún gráficos, podemos facela
máis como PayPal
Non?
Por que eu podería, como un aparte, Podería ir Paypal.com.
E acabamos de ver como podo ver todo o seu HTML.
Podería simplemente copia-lo e recrear a estética do Paypal en vez de ir
vella escola aquí.
Mais repare, claro, e é un pouco pequeno, aínda así, só no fondo
esquina esquerda, como nun punto 10 fonte, ve o que está a URL
realmente vai ser levado a.
>> E por iso, se xa quedou spam dicindo vai adiante, e vostede conta
foi comprometida.
Por favor, prema nesta ligazón e déixenos saber o contrasinal para que poidamos garantir que é
ti, nunca máis faga iso.
Estas cousas deben ir sen dicir.
Pero é marabillosas divertido, e tráxico, como todos os anos, este parece
acontecer con algúns non nula número de persoas.
>> E esa é a beleza de ataques de phishing.
Pode enviar un millón de correos electrónicos.
E aínda que 0,01% das persoas que realmente prema no Paypal e darlle o
contrasinal, que aínda é un número distinto de cero de persoas que acabou dando
lle o seu diñeiro.
E envío de correos electrónicos, por suposto, é moi fácil e, esencialmente, libre
nos días de hoxe.
>> Así, longa historia curta, marabillosas fermosa idea, non?
Anos, esta foi a primeira web, o que permite unha rede de
hyperlinks entre recursos.
Pero tan axiña podería ser utilizado para fins de enfermos.
Correo electrónico, basta dicir que, estes días, xa HTML embutida dentro.
>> Ben, deixe-me só unha cousa.
E imos adiar en gran parte á sección conxunto de problemas de sete para permitir que
explotar os detalles.
Pero déixeme ir adiante e facer algunhas cousas aquí.
Eu estou indo a ir e declarar o que se chama un div ou
división, da páxina.
Déixeme pechar a etiqueta div.
>> E eu vou dicir-se aquí parte superior da páxina.
E, a continuación, por debaixo deste, eu vou facer algo así como outra div, pecha esta
etiqueta, e facer parte inferior da páxina.
E imos salvalo.
>> Entón agora imos voltar para o meu arquivo.
Moi por baixo do esperado.
Pero o que se emprega para a división, debaixo do capó, e é que é certo
dun elemento estrutural agradable.
Non ten ningún estética medida en podemos ver, ademais de parecer
poñer as cousas en novas liñas.
>> Pero aviso, como un aparte, só bater Escriba non corte-lo en HTML como
non en C. Pode pensar que isto é vai poñer unha gran lagoa legal entre
a parte superior e na parte inferior da páxina.
Pero é ignorado.
O espazo en branco é esencialmente ignorada en excepto o primeiro páxinas
personaxe barra de espazo, ou retorno de coche que bateu no teclado.
Se desexa máis saltos de liña, ten que indicar-lo só.
>> Entón, eu vou facer algunhas cousas aquí para dar a coñecer o que está pasando.
Eu estou indo a engadir un atributo que existe e, de novo, o xeito como aprende
que atribúe existe, o que hai etiquetas Realmente, é referencia en liña.
HTML é o tipo de linguaxe - é non é unha linguaxe de programación.
É unha linguaxe de reserva - que despois dun boa media hora, quizais, dunha hora con
tanto, certamente vai entender, máis probablemente, a idea básica.
E, a continuación, unha procura en Google para lonxe é todo as posíbeis etiquetas que pode ser
interesado polgadas
E por a especificación, que é moi benvida e incentivadas aquí.
>> Entón, agora déixeme ir adiante e facer algo así.
Background-color.
E agora, eu vou facer algo como vermello, punto e coma.
E pode facelo na algunhas formas diferentes.
Eu son só un tipo de escriba-lo como super explicitamente como sexa posible.
>> Pero parece que este valor é aquí que se chama CSS, Cascading Style
Follas, que é outra linguaxe completamente.
CSS non ten nada que ver coa abrir etiquetas e etiquetas íntimos.
Ten a ver coas propiedades.
>> E as propiedades son de valor simplemente clave pares, o que supón só unha palabra,
colon e logo, outra palabra.
E se ten varios queridos, ou só aquí, pode remata-la cun
punto e coma, só para maior claridade.
Pero iso tamén vai funcionar aquí.
>> Agora, o que iso vai facer?
Probablemente pode adiviñar.
Déixeme ir adiante e volva a páxina.
E agora está realmente ben benvida.
Entón parte superior da miña páxina é o vermello.
Pero o que é importante aquí é que, eu mencionen antes, que lle dá div
unha división da páxina.
E iso é realmente o que fai.
É esencialmente divide a páxina en un rectángulo que pode, entón,
manipular.
>> E esa noción de rectángulos é unha especie de convincente no que, se pensar
máis calquera sitio, hai probablemente dalgunha estrutura que lle.
A maioría de vostedes xa debe ter visto raramente Páxina principal de Facebook, se está dentro do sistema
en todo o tempo.
>> Pero na páxina principal de Facebook, hai algún tipo de div, ao longo da parte superior.
E isto pode non ser tan sinxelo como unha div, pero non hai unha
alá da rexión rectangular.
O resto da páxina é como unha enorme div, como un gran
maior rexión rectangular.
Así, longa historia curta, só por ter eses pequenos bloques de construción, os
capacidade de cousas modelo como rectángulos, se ancha ou estreita, tamén se pode
facer columnas potencialmente, permite que lay out páxinas, en realidade, pero
desexa.
Nós realmente estamos só rabuñando a superficie aquí.
>> En realidade, se eu fai un outro, déixeme ir adiante e facer estilo,
background-color, imos facer algo como azul, multimedia próximos.
Imos actualizar esta.
Entón, agora está quedando aínda máis fea.
Pero agora podo tipo de show off miña P establecer cinco habilidades, non?
Vermello.
Isto me lembra de RGB, Vermello Triplica verde e azul.
Pois ben, ao parecer en programación web, ou deseño web, o que é iso, temos
aínda non programou nada por si só, pode realmente
ten o código hexadecimal.
Entón, algo algo, algo algo, algo algo.
Entón pode ter seis hexadecimal caracteres, ou tres, nalgúns casos,
e cada un deses puntos de interrogación Ten que haber unha díxitos hexadecimais
cero a f.
>> Se eu queira ter unha morea de vermello, e ningún verde, e non azul, que é a
contrario cero cando a usar hexadecimal?
É f.
Entón eu podo facer ff, cero cero, cero cero, gardar este, e agora vén aquí.
E eu realmente non ver un cambio.
Entón cita unquote "red" é, ao parecer, sinónimo para todo vermello,
ningún verde, non azul.
Mentres tanto, imos cambiar deliberadamente este ser algo
aleatoria, como ABCDF.
>> Imos ver o que é.
É realmente un bo azul, en realidade, azul bebé.
Todo ben, entón estes son só agora combinacións de máis ou menos aleatorias
caracteres.
Polo tanto, non imos quedar atascados aquí.
Pero, de novo, iso fala coa precisión que pode comezar a
aplicar - aínda se está moi resaltado pola estética.
En realidade, se realmente quere ser impresionado, déixeme ir adiante e cambiar
o tamaño da fonte, por exemplo.
E teña en conta o punto e coma, que Cómpre aí.
>> Tamaño de fonte, que se pode simplemente ridículo aquí, 96 puntos.
Salva isto.
Guau, iso é un tamaño de fonte grande.
Todo ben, por iso é moi fácil.
E, de feito, está esencialmente a ver primeira páxina web que fixen
anos, cando por primeira vez Aprendín isto.
É moi fácil de facer moito cousas horribles rapidamente.
>> E se está familiarizado co Wayback Máquina en archive.org, ten
pode atopar toda a miña hediondo páxinas web de graduación.
Un tiña Caco, o Sapo na fronte.
Eu pasei por unha fase na que eu penso foi legal para levar o pano de fondo
unha cortina vermella, cando eu aprendín como crear imaxes de baldosas de novo, e de novo, e
de novo, para encher unha páxina con unha gran cortina vermella brega.
E entón, enriba diso, foi unha icona que tiña que premer para entrar na miña casa
páxina porque era moi en voga.
>> E entón o meu primeiro programa que eu xa escribín Non era o PHP, pero nunha linguaxe
chamada Perla, escribiu un libro de visitas, que é unha cousa moi legal que a
Moitas persoas esperan que ter nunha páxina principal.
Cando chegar á páxina, eles queren que para entrar e dicir quen é vostede,
e por que está alí.
Iso é moi 1990 deseño web estilo.
>> Pero a día de hoxe, con certeza, temos chegar moito máis lonxe.
E vai ver, na sección, e mesmo o problema de definir sete, por
alavancar bibliotecas estes días, é moito máis fácil de facer
cousas máis bonitas rapidamente.
Realmente aquí, estamos só rabuñando a superficie do que se pode facer
estilisticamente.
>> E, de feito, xa, déixeme salientar que isto xa está quedando feo, non
só estéticamente, pero en termos do estilo do meu código, ou o
deseño do meu código.
Estou actualmente comingled HTML, que é as etiquetas abertas esverdeados alí, con
Propiedades CSS, que é totalmente lexítimo.
Isto é realmente onde a lingua tivo as súas orixes.
>> Pero o interese de deseño clean, así como comezamos cousas factoring
fóra de ficheiros C en arquivos h., imos me realmente practicar este tipo de
principio e comezar a facer esta vez.
Deixe-me poñer unha marca de estilo aquí, que tamén existe en HTML, e déixeme
especifica a continuación.
Déixeme borrar iso.
Cor de fondo será vermella.
Vou borrar iso enteiramente.
Eu estou indo para se librar do estilo atribuír, e eu vou con exclusividade
identificar esta div cunha palabra -
arbitrariamente, pero razoablemente, citas unquote "top". E id é unha especial
atributo que define exclusivamente un determinado elemento HTML
como ter ese ID.
>> Agora quero estilizado que, ata aquí, en a cabeza de miña páxina, dentro do
etiqueta estilo, teña en conta que Eu podo facer top hash.
E entón podo poñer un par de rizado aparello, que lembra C, e entón deixar
me pegar no que estilización.
E déixeme ir adiante aquí e anticipar onde estou indo con iso.
Permítanme tamén crear unha ao div de fondo.
Déixeme ir este código horrible de baixo aquí, poñelas aquí, e eu vou estar
algo máis anal agora e estilizado que por só poñer as cousas no seu propio
liña, terminando con punto e coma.
Déixeme librar-se da marca de estilo.
>> Pero eu non estou preparado aínda.
Eu teño que facer outra cousa.
Si, id iguais cita pecha comiñas, "bottom", ou calquera id quero
dar a este elemento.
Agora déixeme volver para aquí.
E isto é atroz.
Non podo tratar con 96 puntos.
Imos facer 24 puntos.
Ou podería ser máis preciso.
Pode realmente usar píxeles, px, entón que realmente granulação máis fina
control sobre a súa páxina.
>> Como un aparte, que non é necesariamente o mellor que se os usuarios, para
razóns de accesibilidade, tanto poder aumentar os tamaños.
Entón, entendo que hai formas de facer cousas que non necesariamente
codificar todo difícil.
>> Todo ben, polo que é máis grande, de 24 puntos, que calquera que sexa o estándar é.
Pero agora é un pouco máis limpa.
E deixe-me dar un paso adiante.
Así como a idea de ficheiros de cabeceira, entender que estamos un paso máis preto diso.
Teño consignado, pero aínda quedan, dentro da miña páxina, esas regras CSS.
Por que quero dar un paso aínda, eliminar esta completo, e
poñelas nun ficheiro separado?
>> Para que eu poida reutiliza-lo, non?
Esta é só unha especie de intuición agora.
Antes, eu afirmaba que era só quedando feo ter o estilo
atributos dentro do Divs si.
Pero só unha especie de pensar que pasar.
Como a súa páxina está máis e máis, se está poñendo aquí, e aquí, e
aquí, e aquí, todos estes diferentes cores e tamaños de fonte e outras
atributos, a súa páxina é moi rápido Vai chegar a ser incontrolable para ti.
>> Se alguén chega ata vostede e di, oh, vostede sabe o que?
Realmente quere cambiar o tamaño da fonte por dous puntos adicionais,
pode ter que ir e localizar e substituír un gran número de liñas de código.
É moito máis atractivo para centralizar todos estes aquí estética.
Pero se quere reutilizar os estética en varias páxinas web, as
o máis interesante para, por exemplo, crear un arquivo
chamado con estes contidos.
>> E déixeme facelo.
Garde este ficheiro.
Digo styles.css, arbitraria pero convencional.
Vou poñelas na casa de John Harvard directorio agora pola sinxeleza.
E que podo facer na miña páxina web é obter librar da marca de estilo por completo,
e algo unintuitively, use unha ligazón etiqueta, que non darlle unha ligazón no
o hiperenlace, sentido de previsión, pero onde digo enlace, é igual a href
styles.css.
E a relación que este elemento ten coa páxina web é servir como
súa folla de estilo.
>> Entón como é que eu sei diso?
Un deles, que acaba de ler o manual, ou Google ao redor, e vostede
ollar a varios recursos.
Quero dicir, que realmente é como incorporarse técnicas como esta, e, de acordo
con esa idea de ensinar a si mesmo novo linguaxes, unha vez máis, vai descubrir que
só hai un número finito de cousas a calquera lingua que, unha vez que comeza
eles, verás que queda máis e máis rápido a escribir.
En realidade, a aprendizaxe dunha nova programación idioma é moito máis rápido que unha nova
lingua falada, porque estas cousas son moi pequenos e moito máis
definidos con precisión.
>> Pero eu destacado algo dunha anomalía aquí.
Por que destaquei esta barra aquí?
Porque eu teño que pechar a etiqueta.
Eu debería pechar a etiqueta.
E vai atopar moitos recursos en liña que non
necesariamente marcas próximos.
E realista, non é estrictamente necesaria para a técnica e existen
razóns da realidade, os navegadores son só moi tolerante a erros na rede
páxinas, para mellor ou para peor, pero sobre peor.
>> Entón, iso aquí é só unha maneira máis limpa de dicir algo estúpido como este,
onde se pretende abrir a etiqueta ligazón pero pechalo, non hai realmente ningunha noción
de contidos para a etiqueta ligazón.
Significa só que cargar este ficheiro e poñelas aquí.
É como include pechada C. Pódese abrir e pechar unha etiqueta dunha soa vez
dentro da mesma etiqueta.
E hai outros exemplos.
Esta non é a forma de facelo, pero tag br, para saltos de liña, se eu
realmente quería lograr o que era intentando antes de premer Intro, se
Eu explicitamente dicir salto de liña, salto de liña, salto de liña, salto de liña, e
entón volver cargar a páxina, agora vai notar que a parte inferior da páxina é,
en realidade, moito máis lonxe no na parte inferior da páxina.
Pero aínda que se pode facer moito máis limpa con CSS, e con marxes,
e con outro tipo de estética técnicas.
>> Entón, por agora, o delivery é iso.
HTML, temos estes cousas chamadas etiquetas.
En CSS, temos esas cousas chamadas de propiedades.
Podemos comingle estas dúas linguaxes, ou usando o atributo de estilo,
ou a etiqueta de estilo, ou mellor aínda, factoring Lo por completo, como facemos
no conxunto de problemas 7.
Preguntas, entón, sobre o fundamentos conceptuais aquí?
>> Audiencia: Eu teño unha pregunta.
>> COLUMNA 1: Oh, desculpe.
>> Audiencia: Por que non foi en cor -
>> COLUMNA 1: Oh, na outra pestana?
Este aquí?
>> Audiencia: Non, é coma se o -
>> COLUMNA 1: Ah, iso é porque Estaba a ser desleixado.
Engada o arquivo no lugar incorrecto.
Entón, se realmente poñelas aquí, e eu chmod, todo o + r para styles.css e
agora volver cargar a páxina, agora nós obter a estilización de volta.
E por que os tamaños de fonte son diferente, non vemos tan grande
espazo en branco.
No seu lugar, ver o que está a estándar é de vez.
Boa pregunta.
Si?
>> Audiencia: Por que é o elo etiqueta dentro da cabeceira?
>> COLUMNA 1: Por que as conexións etiqueta dentro da cabeceira -
resposta curta, só porque.
Iso é o que se decidiu.
É onde as etiquetas de enlace ir cando Ten o que se chama
folla de estilo externa.
Outras preguntas?
>> Todo ben, ben, imos facelo.
Nós nos divertimos moi por diante de nós hoxe.
Isto é só rabuñando a superficie do CSS.
Imos facelo.
Imos dar unha pausa de cinco minutos aquí porque, por meu correo electrónico, imos colgar
alí ata 2:30-ISH hoxe.
Pero se ten a saír, iso é bo.
Pero imos seguir adiante despois de unha pausa de cinco minutos.
E nós imos aprender un pouco sobre PHP, MySQL, e moito máis.
>> Todo ben, entón imos tentar, agora, para amarre un algunhas destas ideas xuntos e facer,
dicir, o noso propio buscador.
Notei, curiosamente, a continuación.
Cando está no Google.com, está normalmente a unha URL como este aquí
con nada tralo dot com.
Pero se eu buscar algo estúpido como gatos e presione enter, nós imos chegar - non
estúpido, pero xa sabe.
>> OK, así que ter en conta, na parte superior da páxina, Agora, o URL ten, por suposto, cambiou.
E iso non é nada novo para calquera de nós.
Fai clic en ligazóns e outras cousas acontece na web.
Pero o que é interesante aquí é o seguinte.
Hai unha morea de confusión, pero imos me xogar fóra cousas que eu non fago
entendo moi ben ou non ollar realmente relevante.
>> Deixe-me librar diso.
Deixe-me librar diso.
E déixeme só se librar de todo isto.
E agora conta que os gatos está na URL, seguido cun q, entón un igual
asinar diante del.
Entón non é que esta é a forma na que o así que funciona cando se trata
para entrada e saída.
>> Nós falamos moito sobre caixas negras, non?
Así, se esta é unha función aplicada aquí como unha caixa negra, que leva entrada
e produce unha saída, así como, os medios polo cal fornecer datos para a
sitio web é de forma, moitas veces, da súa URL.
Vostede simplemente poñer un punto de interrogación e logo, unha chave igual valor.
E entón, quizais un e comercial, e logo, outra clave é igual ao valor, entón quizais
outro comercial, clave igual valor.
É así que pasar en claves e valores, pares de entradas.
>> Entón, se eu premer Intro, agora, o que é interesante sobre Google é que todos
que confusión eu delete non aparece sexa estrictamente necesario.
Todo o que eu teño enviar a Google é a pregunta marca q é igual a gatos para obter
facer algúns gatos.
Ben, a implicación de que, entón, é se eu puxar arriba gedit, comece
facer o meu propio buscador aquí nun arquivo chamado seach0.html.
>> E déixeme ir adiante e eliminar unha liña que
non deberían ver.
E agora, deixe-me ir ao meu propio navegador, polo tanto, non a Google, e ir a
http://localhost.
E iso vai estar no camiño.
Entón, nós imos ter que dicir adeus ao que, polo momento, mover este aquí,
Oh, agora imos ter que dicir adeus a ese ficheiro.
>> Sempre que ten un arquivo chamado index.html ou index.php nun
directorio, se o servidor web está configurado desta forma, o que vai
ver, por defecto, é o contido do que ficheiro en vez de unha listaxe do
directorio, como eu quería aquí.
Ler máis sobre este asunto en spec.
Non viu iso.
>> Entón iso é o que realmente quería.
Pero hai un momento, houbo unha arquivo neste cartafol chamada
index.html e index.php.
E para que o servidor web se me amosar estes arquivos.
Pola contra, quero que este directorio list aquí.
>> Entón, eu estou indo a ir a CSS e ir search0.
E eu afirmo que este é que será o inicio da miña propia competitivo
buscador.
E para facelo, eu estou indo a ir en aquí, en CSS, e abrir-se con
gedit, procura 0.
Pero, desgraciadamente, non hai non moita cousa a ocorrer aquí.
Todo o que eu fixen foi usar unha etiqueta título, que pasa a chamarse H1, que
significa, esencialmente, grandes e negra, e é iso.
Pero os medios polos que podemos fornecen insumos son a través destes
cousas chamadas formas.
>> Entón deixe-me ir adiante e abrir e pechar, cautelarmente, unha etiqueta de formulario alí.
E déixeme ir adiante e facer algo así.
Entrada, tipo de texto é igual.
E entón imos pechar a etiqueta de dentro os propios soportes.
Eu non teño para comezar un campo de texto e deixar un campo de texto.
El só vai estar alí ou non.
>> E, a continuación, por debaixo diso, faremos tipo de entrada é igual a enviar.
Gardar esta.
E agora imos facer un verificación de sanidade rápida.
Imos actualizar.
>> OK, por iso non é malo.
Non é o estilo de Google, pero é ben preto.
Hai un campo de texto.
Podo escribir algunhas cousas en, prema Intro, pero non pasa nada aínda.
E iso é porque eu non especificou unha acción por esta forma, por así dicir.
Entón, se eu volver para o elemento de formulario, ao parecer, e sei que isto só
de ler a documentación, que tag form ten un atributo
chamado de acción que é a URL do sitio web para o que
quere enviar o formulario.
>> Realmente non creo que temos tempo para aplicar todo o back-end para o
buscador hoxe en día.
Entón imos só dicir, eh, ir a google.com / search.
E agora déixeme pechar miñas citas.
E déixeme especificar mellor que o método a utilizar vai
a ser chamado de conseguir.
>> Para reducir a historia, hai dous xeitos, polo menos, que pode enviar información
desde o navegador ao servidor.
Un deles é conseguir, e, para fins de hoxe, iso só significa na URL.
Ve exactamente os puntos de interrogación, os signos de igual e que ampersands
vimos anteriormente.
Ou hai unha alternativa chamada post.
Polo momento, sabemos que o post é frecuentemente usado cando quere subir arquivos, como
imaxes e así por diante, ou cando quere Enviar información de tarxeta de crédito, ou
contrasinais, calquera cousa que non realmente ten sentido, conceptualmente, ou
seguridade sabio, para acabar na dirección de o navegador, onde espionaxe pais,
ou compañeiros, ou calquera con acceso para o seu ordenador pode ver.
>> Entón, imos gardar este aquí.
E eu teño que facer outra cousa.
Non é suficiente só para dicir-me dar un campo de texto.
Teño que dar que o campo Valorados un nome.
Entón deixe-me prestar elección de Google nomes, Q e especificar que segundo
asignar Realmente non me importa sobre o nome do botón enviar.
Todo o que me importa é a presentación o que o usuario escribe Pol
>> E agora ese é o tipo de feo.
El só di enviar.
Acontece, e sei que dende o documentación, podo realmente dicir
valor equivale a cita unquote "CS50 da investigación, "preto das citas.
Entón imos actualizar de novo.
Entón eu sigo batendo Command-R ou Control-R no meu teclado para actualizar.
>> Agora temos un máis interesante buscador.
Non chega a parecer Google aínda, con todo.
Entón, imos adiante aquí e facer un pouco de salto de liña.
>> OK, entón agora temos Google.
De feito, apenas ten Google.
Entón agora o que vai pasar?
Vou escribir algo como Cats.
E o navegador vai analizar de que xeito que eu definido.
E enviará o usuario a este URL.
Entón, esta vez, por algún motivo curioso, Teño máis información sobre stocks
que sobre os gatos reais.
Pero iso é bo, porque entende que aínda acabei aquí, q é igual a gatos.
>> Así, longa historia curta, parece bastante trivial para a entrada do usuario.
E para ser xusto, hai acios doutros tipos de campos de formulario.
Hai caixas de verificación e pouco mutuamente botóns exclusivos e
menús desplegable, e moito máis.
Pero todos estes son como concepto facilmente aplicado como
este campo de texto era.
E, finalmente, só temos que facer seguro de que alguén está escoitando no outro
Fin da liña para conseguir que información procesadas, de algunha maneira, e
nos devolver os nosos gatos.
>> Vexamos un pouco máis implicados exemplo.
Déixeme ir ao directorio do meu VHost, no servidor local, público, e onde
poñer o código fonte de hoxe.
Todo iso estará no curso de web para que poida xogar.
E se eu entrar froshims, déixeme abrir se este ficheiro agora, froshim0.php.
Este é un pouco máis detallado, así Non imos escribir isto a partir de cero.
Pero só agora entender algúns un pouco características familiares.
>> Un, etiqueta form, acción diferente.
Non é unha URL completa.
Agora, é aparentemente para arquivo chamado register0.php porque, nun momento,
Vou ensinar-me un pouco algo sobre PHP, unha programación
lingua, xa que o PHP se pode usar para implantar Google implementado como
o back-end dos seus motores de busca.
>> Google, en realidade, probablemente usa algúns Python, algúns C + +, e
acios de outras linguas.
Pero seguramente poderiamos aplicar a investigación resultados usando PHP, se quixésemos.
Pero, por agora, imos mantelo simple.
E iso é realmente unha reminiscencia dunha dos demais primeiros sitios que eu
fixo anos.
>> Na miña época, se catastrouse para deportes internos como un calouro por
recheo de un anaco de papel, camiñando en todo o curro, e soltalo no
a caixa de correo dun Proctor en Wigglesworth, e foi así que
rexistrada.
E así o meu proxecto logo CS50, era poñer que, o que fai perfecto
sentido, para a web, o que non foi como en voga, a continuación, como é agora.
Pero todo o que tiña que facer era crear, esencialmente, un formulario HTML.
>> E esa forma mirou máis ou menos así.
Eu tiña unha entrada para o O nome de calouro.
Eu tiña outra caixa de verificación ou ou non quería ser capitán, que
seu xénero era, e o seu dormitorio era.
E entón eu codificado en cousas como Apley Court, e Canaday,
Cinzas, e así por diante.
>> Entón, de novo, novas etiquetas.
Aínda non vin iso antes, novo atributos, pero moi accesible.
Unha vez que ver un exemplo, pode tipo de prestar esa idea e facer unha caída
menú para nada no estómago.
Pero o que é importante é que cada un dos estas cousas teñen nomes.
E na parte inferior do formulario, hai un botón de envío cuxo rótulo,
ou valor, é rexistro.
>> Entón imos para esta páxina.
Déixeme volver a listaxe do directorio.
Déixeme entrar froshims, e ir froshim0.php.
Por iso, é horrible, para ser xusto.
Entón, eu sempre podería estilizar este con un pouco de CSS, eu podería facer algún
gráficos, quizais engadir algunhas cores, e facer este máis fermosa.
Pero funcionalmente, eu diría que este é realmente moi completo.
>> Desafortunadamente, cando encher tanto, David, Capitán, home, imos escoller,
digamos Matthews, Register, todo o que pasa é o seguinte.
Pero teña en conta un par de delivery.
Un deles, o arquivo de retorno aos resulta aparentemente?
Así é, de feito, register0.php.
Así, o feito de que xa vimos que a acción valor hai un momento para register0, este
confirma que de feito acaba naquel arquivo particular.
>> Agora, este é só un texto feo.
Pero teña en conta que este texto é vindo servidor local,
que se produce polo aparello.
Pense no aparello agora só como un servidor web que se pode en
Science Center.
Podería ser na web real.
Por iso, é accesíbel ao público.
>> Entón, claramente, hai algunha maneira de pasar formar entradas de campo a un servidor
de xeito que se pode facer algo con eles.
Desafortunadamente, register0 é moi estúpido.
Todo o que fai é imprimir un array que se parece con isto.
E non é unha matriz na sentido que coñecemos.
Acontece que o PHP, e unha morea de linguas, que non só numericamente
arrays indexadas cuxo primeiro índice é cero, un, dous, logo despois do punto,
punto, punto, n menos 1.
>> Isto é o que se chama array asociativo.
Unha matriz asociativa é aquel en que pode almacenar pares de valores clave onde
a clave non é necesariamente un número.
Podería ser de feito unha corda, unha palabra.
E por iso este pode ser aplicado, debaixo do capó, ao parecer,
utilizando unha estrutura de datos coñecido como un?
Penso que algo dramático estaba a piques de ocorrer -
táboa de hash.
>> Así, unha táboa hash, aviso, aqueles de vostedes quen fixo isto para I set 6, ou incluso recordar
el, polo menos, mesmo se fixo un intento, un táboa hash, no noso uso, foi usada para
almacenar só palabras.
Pero, realmente, estaba almacenando chaves e valores.
Se aplicou unha táboa hash para P set 6 dicionario, as chaves estaban
palabras en si, e os valores foron efectivamente verdadeiro ou falso.
Si, aquí, ou implicitamente, Non, aquí non.
>> Así, podemos xeneralizar esta idea.
E poderiamos usar unha base de datos moi semellantes estrutura para almacenar a cadea non
-Se só na súa táboa hash, mais supoñer que en cada un de súa haxix
nós da táboa.
E pode ata facelo nun intento no canto de só ter un bool.
Podería ter algo máis.
E se a chave non estaba Maxwell, para instancia, pero cita unquote "nome", ou
Citando "capitán". Unquote E dentro súa estrutura de datos C, se pon un
valor, e non só un valor booleano, pero de valor como cita unquote "David", ou
"M", ou "Matthews", e así por diante.
>> Entón, estas mesmas estruturas de datos que usan aparentemente existen noutras linguas.
E eu diría que son realmente moi, moito máis sinxelo de acceder aquí.
Imos, de feito, un ollo agora, nalgún tal sintaxe.
>> Eu estou indo a ir en un directorio PHP.
E eu vou abrir unha mellor versión de Ola-0 de antes.
Teña en conta que o único que fixen foi engadir algúns comentarios.
Entón, podemos librar desa distracción.
>> E este programa fai realmente imprime Ola, por que eu especifiquei entre
marcas que quero facer este código.
Agora, imos ver en un momento Por que isto é útil.
Pero imos abrir outro exemplo aquí.
Déixeme ir adiante e abrir dicir: gedit condicións dunha.
>> Este é o camiño de volta no tempo.
Pero semanas, eu creo que, nunha semana ou dúas semanas, tivemos un exemplo chamada
conditions1.c.
E decidín reimplementar en PHP, só a sorte de destacar que
PHP, sintaticamente, é case idéntico a C. Isto non é un enorme salto
da semana pasada a esta.
>> Teña en conta na parte superior do programa, que comeza, como antes, con algunha
comentarios, que vou me librar como unha distracción.
Repare que eu estou en PHP Modo neste arquivo.
Entón este código, imos ver, serán executados.
Teña en conta que hai readline, que é, probablemente, o
analóxico en PHP de getstring.
Teña en conta que é un pouco diferente.
Realmente especificar un aviso ao función chamada liña lida, e iso é
o que o usuario ve.
Entón non ten que printf manual.
Pero isto non é un gran negocio.
Vou gardar, dentro $ n, o valor dese retorno, calquera que sexa o
usuario escribe é a súa int.
E aquí está outra curiosidade.
Acontece que, en PHP, calquera variable só ten que ser prefixado
cun cifrão.
É un pouco aburrido.
Mais repare que eu non fixen en PHP.
O que falta na man esquerda lado do signo igual?
>> Ningunha mención do tipo.
Entón, iso é distinto de C. Para mellor ou para o mal, o PHP é unha vagamente
linguaxe ingresaran.
Ten números.
Ela ten cadeas.
Ela ten booleanos.
E ten algo outros tipos de datos.
Pero, o programador, xeralmente Non se preocupe con eles.
A vantaxe disto é que fai un pouco máis fácil de programar.
Pode pensar un pouco menos.
A desvantaxe é que tamén lle abre para posibles erros, se accidentalmente
tratar un número como unha cadea, unha cadea como un número, potencialmente, pero aínda
entón, PHP, e unha chea de idiomas, son moi tolerantes.
Eles van usar o que se chama conversión implícita.
E se tentar empregar n, no contexto dunha situación numérica, será
converter o que aquí será un cadea, porque, se o usuario escribe
algo, e obter o resultado, como con readline, ou chegar a cadea,
que vai voltar unha cadea.
>> Pero teña en conta, algunhas liñas despois, eu comprobar se n é maior que cero.
Entón PHP lanzará implicitamente miña 123 "cadea", ou o que o usuario
tipos de, nun int.
Así, en breve, o material só funciona moito máis intuitiva.
Así, temos agora comezar a relaxarse ​​algunhas das as cousas que fixemos no pasado.
>> Unha gran cantidade deste material é o mesmo, con todo.
Aínda non é igual a igual.
Como un aparte PHP tamén coincide coincide iguais, pero máis sobre iso, quizais, en
futuro.
Esa foi unha.
Typo pero dous sinais igual significa o mesmo cousa como antes, para comparación.
printf significa o mesmo que antes.
Barra invertida n significa o mesmo cousa como antes.
>> Entón, como fago para executar este programa?
Ben, como antes, se eu fai PHP, conditions1.php e escriba
un número como 123.
Este é un número positivo.
Se eu escribir 0, I elixir 0.
E se eu escribir 123 negativo, eu fico facer un número negativo, que é só
é dicir, sintaticamente, PHP é super, super similar.
>> Entón, por que iso agora útil nun contexto web?
Ben, imos volver a este froshims exemplo, que parecía,
de novo, como este aquí.
E imos realmente puxar arriba a páxina web de novo, o que semella iso.
Que podemos facer co datos que aparecen?
>> Ben, deixe-me abrir unha nova versión deste.
E vai ver que o problema especificación actuacións anda vostede
a través de algúns deles.
En vez de comezar con cero, imos ollar para froshims3,
que fai un pouco máis.
>> Teña en conta en primeiro lugar, de feito, imos abrir o que 0 é, entón ve
o rexistro 0 era.
Teña en conta o rexistro 0 fixo.
Un deles, eu teño comentarios na parte superior.
Eliminar os e centrar só iso.
A maior parte do contido de register0.php son, obviamente, que lingua?
Só PHP cru.
>> Así, o aviso previo, este arquivo non comezar con, no momento, o apoio aberto,
punto de interrogação, PHP.
PHP non permite que se mesturan Código PHP con etiquetas HTML.
Pero eu fixen iso aquí dentro da páxina aquí.
>> Agora, de novo, só se sabe que iso despois mirou para o guía. print_r,
ao parecer, é print_recursive. _recursive E este é só un práctico
función de utilidade que imprime, recursiva, o que entregalo.
Se entrega-lo dunha matriz, vai imprimir un array.
Se entrega-lo un número, vai imprimir un número.
Entregalo a corda, que vai imprimir unha cadea.
Se entrega-lo unha táboa hash, el imprimirá unha táboa hash.
Non ten que escribir todo de que o código só.
>> Agora conta que eu estou entrando Modo PHP aquí.
Estou saíndo do modo PHP aquí.
Así, cando o servidor web le este ficheiro de arriba abaixo, de esquerda a dereita, porque
remata nun ficheiro chamado. php, todo o que non está dentro de etiquetas PHP é
só será pincho fóra, como HTML puro.
Non é gran cousa.
Pero tan pronto o servidor web conta iso, que vai dicir que eu non debería
cuspir literalmente print_r do post.
Eu debería executar a seguinte liña de código.
>> Así, a última pregunta, entón, é esta imaxe é, así, o que diaños é isto?
Tomé un palpite.
Que é de R $ _POST, probablemente?
>> Audiencia: [inaudível]
>> COLUMNA 1: Si, os datos publicados.
Lembre, imos rolar de volta tempo por só un momento.
froshim0, unha vez máis, quedou así.
Un super maioría deste é só HTML.
Unha vez máis, algunhas marcas que non ten visto aínda, ou cos que
xa está familiarizado.
Pero o interesante foi iso.
Esta liña é o que realmente une para o noso arquivo register0.php.
Estou enviando vía método post.
E isto significa que os parámetros o usuario escribe non son
vai acabar onde.
>> Eles non van para aparecerá na URL.
Eles aínda van ser enviadas dende o do cliente, desde o navegador,
servidor, pero só a través dalgún outro mecanismo que imos renunciar a nosas mans
no para hoxe, pero non é na URL.
Pero teña en conta a relación agora con post, que, por convención, é
minúsculas aquí.
>> Pero se eu abrir register0.php, Estou parecer imprimir esta.
Polo tanto, esta é unha especie de estraño convención de nomenclatura.
Pero o que é bo en PHP é que, cando usando PHP nun contexto web, non nun
liña de comandos, como eu fixen hai pouco, cando está realmente usalo nun web
páxina, nun directorio VHost como somos, PHP automaticamente pode cubrir esta
cousa, que é unha matriz asociativa, por así dicir, unha táboa hash, con
todo o que o usuario inseriu dentro
>> En suma, $ _POST en todas as tapas é un variable global que o PHP só
Magic crea para vostede cando usando PHP nun contexto web.
E pon dentro de todo o nomes dos parámetros na forma en que
foi sometido a este ficheiro e todos os valores que o usuario inseriu dentro
Por iso, entrégalle o que o usuario ingresaran no formulario.
>> Entón, antes, debemos saída realmente parvo de só ver iso, porque todo o que fixen
foi recursivamente imprimir este array.
A clave é o nome, o valor é David.
A clave é o capitán.
O valor está conectado.
E a frecha dobre e do ángulo soporte de alí, isto é só arbitraria.
Isto non é un código.
Esta é só unha forma de amosar que de PHP cal é o valor dalgunha clave é.
>> Pero agora déixeme propoñer que, en froshIMs3, é case idéntico
salvo que se somete a ese ficheiro.
E, de novo, imos medio que mirar para iso, só para ver algúns
sintaxe, pero teña en conta o que este ficheiro fai.
Dar un palpite baseado só nas liñas de código, o que probablemente se parecen
Grego, en certa medida, aparentemente está facendo.
>> Este ficheiro é de algunha maneira relacionados ao correo, correo electrónico.
Entón o que é este programa está facendo?
Nesta versión, se eu fose realmente enche este formulario - e déixeme ir
froshIMs3, non froshIMs0 -
o xeito que parece o mesmo.
David, capitán, do sexo masculino, dormitorio, Matthews.
Pero se eu enviar isto, esta imaxe é indo a ir a register3.php.
>> E eu afirmo, de ollar para el é código fonte, que vai
implican algunha forma de correo electrónico.
Déixeme ir adiante e abrir este nunha fiestra máis grande, entón nós
pode ve-la máis limpa.
Estamos en VHosts, servidor local, público, froshims.
Vou abrir unha diferente programa, só para que
Pode ver máis dunha vez.
>> Entón, agora aquí, teña en conta algunhas cousas.
Na parte superior do ficheiro está aberto soporte, punto de interrogación, PHP.
Despois, hai unha morea de comentarios, que podemos pasar por alto, é
desinteressante para agora.
>> Agora hai este.
Acontece PHP ten unha morea de código chamado precisa.
É moi semellante en espírito á C do incluír, mestura include, que
esencialmente agarra o contido dalgúns outro arquivo e só se Estatela los aquí,
para que poida usalos.
Neste caso, o aparello ten, preinstalado, unha biblioteca, libre e
biblioteca de código aberto chamado PHP sistema de correo que calquera pode
descargar de internet.
Nós só fixemos isto por ti.
E isto significa que agora teño correo-e función á miña disposición.
>> Agora, teña en conta algunhas cousas.
Eu estou indo a validar a envío do formulario.
Acontece que PHP, un, ten de admiración puntos para o operador, non só como
C. Pero o PHP tamén ten unha función chamado baleiro.
>> Baleiro, só devolve true se o valor da cousa que entrega-lo
parénteses está baleira, como o usuario non escribir nada dentro
Entón, iso está dicindo, e observará o sintaxe, lembra moito C, se o
clave de nome, de xeito que o campo nome no formulario, que foi sometido a través de correo, por
o usuario, non é baleira, ea súa xénero non é baleiro na forma en que
ben, e seu dormitorio non é baleiro -
mais repare que eu non me importa o capitán, entón que é o que imos facer?
>> Eu estou indo a executar esta liña de código.
E pode pensar neste tipo de como malloc, pero é un pouco
máis sofisticado do que iso.
Pero de momento isto me dá unha especial struct do tipo PHP sistema de correo.
Pero ignorar a palabra chave new para hoxe.
>> Agora eu vou chamar a unha función chamada IsSMTP, que di: usar SMTP.
Este é o porto 25, así como o vídeo a semana pasada, cando a cousa estaba xogando
correos electrónicos ao cortalumes.
A porta 25 é SMTP.
SMTP significa usar o servidor de correo-e.
Cal deles, podemos utilizar Harvard SMTP.fas.harvard.edu.
>> Podemos definir a partir do enderezo ser John Harvard.
Se eu rolar máis lonxe, podo establecer o enderezo do destinatario, só
arbitrariamente, ser John Harvard é así.
Entón, que vai ser o propio correo electrónico.
>> Agora podo axustar o asunto ser de rexistro.
E podo facer que o corpo de correo electrónico do seguinte xeito.
Esa liña parece algo máis enigmática, pero iso é só porque hai moito
da información nel contida.
Un deles, hai un operador punto.
Alguén xa debería saber o que o operador punto fai.
É concatenação.
Entón, se quere ter unha cadea en PHP, e anexo-la, ou preceder-lo,
outra cadea en PHP, grazas a Deus lle Non ten que usar strcopy e malloc,
e todo iso máis.
>> Se quere concatenar dúas cadeas, que se preocupa a memoria.
Imos figura PHP que para ti.
PHP fará co operador punto aquí é só facer unha gran frase fóra
desta liña, esta liña, Nesta liña, esta liña.
E agora, o aviso previo, que vai a conectar os valores.
Así, o correo electrónico que John Harvard vai para recibir é, literalmente, vai dicir
nome, colon, algo mellor, entón nós pechar a corda e concatenar en
o que o usuario inseriu no, entón unha nova liña.
>> A continuación, na seguinte liña de John Harvard correo electrónico, que vai dicir
Capitán, On ou Nada.
Vai dicir o sexo, masculino ou feminino.
Dormitorio será Matthews no meu caso.
E, a continuación, entender coma familiarizado ao final.
E entón, aquí abaixo, o aviso previo, algo enigmática aínda, pero, de novo, seguindo unha
estándar que vai facer máis familiar P tras axuste 7, se o envío de correo-e
devolve false, entón vai adiante e morrer.
>> Entón, PHP ten unha función chamada morrer, que, literalmente, só mata o
web e só amosa o que diga a el - o está a morrer
palabras, por así dicir.
E que, no caso, el ha imprimir o que a información de erro é de
o que pasou para dar mal.
Así, longa historia curta aquí, o que temos é un exemplo en que, cando o usuario
envía o formulario, froshim0, froshims3.php, que vai para
register3.php.
Pero register3.php prosegue entón para realizar todas estas liñas.
>> Polo tanto, hai algunhas desmarcações tomar aquí.
Unha, é aparentemente moi fácil, programaticamente, para enviar correos electrónicos,
cal é bo.
Cando os usuarios rexistrar para a súa web, en Neste caso, cando se rexistrar para a súa
deporte, pode enviar o calouro Proctor, ou John
Harvard, neste caso.
>> Pero iso tamén significa que pode facer o que?
Enviar un correo dende calquera a calquera.
E iso é moi certo.
Isto non é tan fácil de facer se está acostumado a usar o Gmail.
Pero se xa usou ou Eudora Outlook, pode moi ben contar unha
servidor de correo que é quen queira.
E é aí que eu teño para poñer en ese sombreiro e dicir: non fagas iso.
Pero iso é proba de quão doado é para realizar ataques de phishing, e
enviar un correo anónimos e Spam, de xeito máis xeral.
E realmente se reduce á feito de que todo o que precisa é de algúns
acceso programático.
>> Como un aparte, o meu encontro máis próximo con a tarxeta do anuncio, o meu primeiro ano,
Foi cando descubrín que legal truco que, uau, pode
enviar correos electrónicos a partir de calquera.
E así estabamos tendo algún parvo argumento, literalmente, en Matthews,
entre o meu grupo Proctor.
Eu nin me lembro cal era o problema.
Pero eu quería tentar poñer un fin a este debate estúpido.
>> Entón eu decidir que só enviará un correo electrónico ao meu grupo Proctor, finxindo ser
outro cara, con cuxa opinión eu desacordo, e telo de acordo con
calquera que sexa a miña opinión foi en este debate concreto.
E así eu forxou este correo a través dun técnica similar en espírito para iso.
Pero foi realmente máis fácil no momento.
Prema en enviar.
El non estaba satisfeito, nin ser a tarxeta do anuncio.
>> E eu estaba moi rapidamente capturadas en segundo, porque como vostede sabe, eu asino
meus correos electrónicos dunha certa maneira.
E a pesar de eu facelo manualmente, en gran parte, 15 anos despois, porque eu estaba
traumatizado por iso.
Non teño unha sinatura no meu correo agora.
Pero en 1995, eu só tiña un SIX, unha sinatura no meu correo electrónico.
Entón houbo esa nota dicindo, Dear Grupo Proctor, eu aquiescer miña opinión
e estou de acordo con David, asinado así e así, nova liña, nova liña, DJM.
>> Polo tanto, non faga iso, ou, en xeral, tomar vantaxe desta técnica.
Pero cando facer un sitio, como, por seu proxecto final, ao facer unha
sitio para algo emprendedor, é así que, pragmaticamente, é posible
alavancar outros servizos en Internet como correo electrónico e logo, en realidade,
enviar cousas usando código.
>> Entón, como podemos mellorar isto?
Ben, primeiro imos dar un rápido paseo algunhas das cousas que vai ver,
e logo, un ollo un par de exemplos.
Entón, un, para tranquilizar porque Estamos voando a través do PHP.
E sei que, nalgún momento, vai ter para realmente comezar a escribir este
non o fixo.
Entenda que, unha, principal especie de fóra da fiestra con PHP.
Se queres escribir un código que recibe executado, pode comezar a escribir en
un ficheiro chamado. php mentres ten o soporte aberto
punto de interrogação PHP tag.
>> Pero teña en conta que estes son condicións en PHP.
Note, este é exactamente o mesmo foto tivemos unha semana, cando tivemos
en condicións en condicións C. PHP son estruturalmente e
sintaticamente a mesma.
Única verdadeira diferenza é que ten variables involucradas, ten aqueles
cifrões.
>> Mentres tanto, as expresións booleanas ollar só como este para
ou-ing ou e-ing xuntos.
Switches exactamente o mesmo.
O que é bo en PHP, mentres que no C, interruptores ten que ser en casos
primitivos como enteiros ou chars, en PHP as súas declaracións de casos realmente pode ser
sobre toda unha corda, que é en realidade, unha especie de bo.
Aforre-lle moito tempo.
Non podería facelo en C.
>> Velaquí un loop en PHP.
É idéntico.
Dispoña de cifrões para as variables.
Non ten que mencionar que algo é un int.
Vostede só declaralo lo con un sinal de dólar e nome da variable.
Pero un loop é o mesmo.
Un loop while é o mesmo.
A facer loop while é o mesmo.
>> Este é un pouco diferente.
Así, con PHP, cunha matriz, pode estaticamente declarar unha matriz, como en A,
pero usa corchetes.
En C, que podería usar chaves, se mesmo sabía.
Pero iso é realmente moi común en PHP para declarar unha matriz, no caso en apreciado,
de números, e chamar o número de variables.
>> Propias variables semellante a esta.
Aquí está unha corda, cita da cita "Ola mundo ". Podería ter unha barra invertida n.
Eu simplemente non neste caso.
>> Agora, esta é unha construción interesante.
C non ten iso.
Pero isto é super útil.
E vai ver isto en I set 7 especificación - un para cada constructo.
Se queres reiterar sobre toda a elementos dunha matriz, non ten
para xestionar i $ e $ n, e + +, e todo iso.
Pode literalmente dicir, en PHP, este -
para cada número como número, de xeito Estou asumindo que $ números
é unha matriz de números.
E cando digo para cada número como o número, este vai
automaticamente, como o meu loop é executado, actualizar, en cada iteración, o valor
dentro do número de cifrão -
de novo, e de novo, e de novo camiñando para min sobre esta matriz.
Por iso, só nos salva código.
Non hai punto e coma, sen + + 's, no i é, non n da, é só bo.
>> Pero o PHP tamén ten iso.
E iso é super poderoso.
E vai usar isto, mans diante, conxuntamente P 7.
E matriz asociativa tamén é declarada con corchetes.
Pero teña en conta a sintaxe agora.
É unha reminiscencia do que vimos con print_r un momento atrás.
Cantas claves, como un pouco de verificación de sanidade, que esta matriz parecen.
>> Por iso, ten dous.
E chaman iso dunha matriz.
Pero se iso axuda, pode pensar desta táboa, como mestura, ou como
unha matriz asociativa.
Pero é só unha diferente tipo de matriz.
E, de novo, linguas diferentes telos.
Veremos algo parecido en JavaScript tamén.
Hai dúas chaves.
Un deles está entre comiñas, "símbolo", unha é citar unquote "prezo". E esas claves
cada un ten un valor.
Neste caso, o valor do símbolo é FB, por Valor Facebook, e de prezo é de 49, 26,
que era das accións de Facebook prezo dende esta mañá.
>> Entón, o que é útil sobre unha matriz asociativa.
Podería ter un numéricamente matriz indexadas con só
simple corchetes.
E eu podería ter cifrão Cita equivale exactamente isto.
Déixeme realmente facelo.
Supoñamos que eu en vez de só declarou esa matriz así.
Isto é perfectamente válida, sintaticamente.
Non perde ningunha información, per si.
Eu vexo que o símbolo é fb, e que o prezo é 49, 26.
Entón, por que son asociativas matrices atractivo?
>> Audiencia: Non ten que se lembrar onde se pon cousas.
>> COLUMNA 1: Exactamente, non ten lembrar de onde se pon cousas.
Non ten que lembrar arbitrariamente que o símbolo da acción está na franxa de cero,
e os prezos das accións está nun soporte, o que é especialmente perigoso se
cambiar as cousas, eventualmente.
É moito máis agradable para asociar o que imos chamar de metadatos
cos seus datos reais.
Eu diría que o que realmente importa E aquí é fb e 49, 26.
O símbolo eo prezo é de metadatos que describe os datos que
realmente se preocupan.
Pero este é só moi máis fácil acceso.
>> Agora, como un aparte o que se o prezo que pagamos?
Estamos a facer iso en CS50 por semanas.
Esta función debe vir con algún custo.
Memoria.
Entón, non só está almacenando a 32 bits número enteiro, por exemplo.
Está almacenando símbolo / 0, probablemente.
Entón está a usar máis memoria.
>> E cal é a actuación de máis que nunha
matriz asociativa, probablemente?
É probablemente máis lento.
De acceso aleatorio é agradable, sobre todo cando se pode facer procura binaria.
Pero se está realmente ollando agora non por números, senón por cordas, este
verdadeiramente é aplicado baixo a capuz, probablemente como unha táboa hash, onde
usa unha táboa hash con fío separado.
Ou usa un intento de verdade almacenar os valores.
Entón, talvez poida facer o tempo constante, pero aínda ten que ollar para S-Y-M-B-O-L,
potencialmente, no canto de só 32 bits para buscar algo.
Entón, de novo, esas mesmas ideas que vén volver a repetirse neste contexto.
>> Pero, de novo, PHP agora ten algúns super- globals que, ao parecer, son
arrays asociativos.
Vimos un momento atrás, $ _POST.
E esa super-mundial ten claves e valores.
En concreto, as teclas Aliñar-se co que?
Onde é que as claves $ _POST vén?
Só para recapitular?
>> Audiencia: Nome.
>> COLUMNA 1: Nome, onde?
>> Audiencia: [inaudível]
>> COLUMNA 1: Nome é o atributo.
Ben, onde, de onde orixinalmente vén?
O formulario.
Entón, se unha páxina HTML ten unha etiqueta de formulario, no interior dos cales son algunhas entradas, como
caixas, caixas de texto, desc menús, cada un dos cales ten un nome, estes
nomes acabar como chaves en $ _POST, e, francamente, para que o asunto, $ _GET.
O método é get, mesma idea.
É só dunha forma diferente de super global.
E os valores de, por suposto, desde vir o que o usuario introduciu no seu ou
seu navegador.
>> Pero hai algúns outros.
Hai cookie, que imos volver eventualmente.
Pero estas son as cousas que vostede sabe a web emprega por algún ben ou o mal.
Pero imos volver a iso.
Servidor e sesión, e os dous ter algunha utilidade especial.
>> Pero imos dar un ollo niso.
Déixeme ir adiante e abrir un exemplo chamado mvc0.php Entón MVC
significa o seguinte.
E nós presentamos esta máis cedo do que se típico, de feito, para ti proxecto
7 Conxunto de problemas, e tamén os proxectos finais nunha especie de industria
forma estándar e forma limpa.
É bo deseño.
>> Entón, está a piques de ver, e vai experiencia en I set 7, paradigma, tipo
dunha mentalidade de programación, que parece un pouco algo así.
M para o modelo, C para Controller, V para View.
Longa historia curta, MVC é só un tipo dunha metodoloxía, un xeito de facer
sitios, en particular, a través do cal poñer toda a súa, a frase estúpida -
lóxica de negocios -
todo da súa propiedade intelectual no o que se chama un controlador, un arquivo
como index.php, ou veremos, quote.php ou buy.php.
>> No contexto dun conxunto de problemas 7, a súa modelos xeralmente conteñen os datos,
calquera cousa relacionada a unha base de datos, como veremos finalmente ver, e os seus puntos de vista
conter a estética do seu web, HTML, o CSS.
Entón, xa vimos isto en C algo bits usando arquivos h ..
Realmente vin hai pouco con CSS, por factoring a estilización CSS
cousas fóra do noso HTML.
>> Entón MVC é realmente só sobre deseño liñas na area e dicir: o
código de programación interesante para a súa sitio pertence a que chamaremos o
controlador.
Cousas relacionadas á base de datos normalmente acaba nun modelo.
Pero vai ver, en conxunto Problema 7, nos funden C e M para mantelo simple.
Pero a visión é o lugar onde todo o seu HTML e estética tipicamente ir.
>> Entón, o que iso significa en termos reais?
Ben, deixe-me ir ao noso MVC directorio como segue.
E vai ver máis destes excursionou por medio da especificación.
Así, en mvc0, eu afirmo que dicir, como, Versión 0 de sitios do CS50.
>> Todo o que temos é un pouco de HTML, como unha grande etiqueta h1, aparentemente.
E, a continuación, unha lista con viñetas.
Nunca vin unha lista con viñetas antes, pero non é gran cousa.
Imos rapidamente ollar para o código fonte.
Acontece que unha lista non ordenada con balas ul soporte ábrese cun ou
máis elementos da lista, Li
Entón, aviso aquí é unha marca de referencia.
Vimos que un momento atrás.
>> Entón é así que eu apliquei nesta páxina.
Teño dous enlaces, dous elementos de lista, un ul a lista non ordenada, e ao final
resultado, esteticamente, iso é moi sitio bonito, versión 0 aquí.
Pero o que é interesante agora é saber como este é aplicado baixo o capó.
>> Déixeme ir gedit e abrir este primeiro exemplo, para pintar un cadro.
E nós imos ollar o que está fallo, potencialmente, aquí.
Agora, se eu entro en localhost, público, MVC, teña en conta algúns arquivos.
Vou chamar a eles, ao momento, todos os controladores.
Pero iso é un pouco de abuso, xa que verás todo está mesturado
dentro delas.
>> E déixeme ir dentro index.php.
E vemos literalmente o mesmo HTML.
Así, aínda que este ficheiro remata en . Php, Iso non significa que ten que
ten algún código PHP.
Pode ser só HTML puro, aínda que iso é medio parvo.
Pero teña en conta que non hai soporte aberto PHP marcar, con excepción para iso, o que, a verdade,
está alí só para servir como un comentario.
Pero isto non é funcionalmente ata que interesante.
>> Pero entender iso.
O que é interesante é agora o que Os cambios nesta páxina.
Déixeme clic Conferencias.
E teña en conta a dirección está a piques de cambiar.
Agora estou no lectures.php.
Déixeme clic cero.
Agora estou no week0.php E agora imos me abrir estes arquivos no gedit.
Non só o contido, pero imos me abrir conferencias.
E déixeme librar-se dos comentarios centrar só esta parte.
>> E agora déixeme abrir só un, week0.php, xogue fóra os comentarios,
só para limpar isto.
E agora entender o seguinte.
Pensando realmente tipo de coidado sobre deseño, e imos facelo de liña
anterior do mesmo, o que se pode facer mellor aquí, que pensas?
>> Como é que fago unha semana un?
Como sobre isto.
Entón é así que eu fixen unha semana.
Fun ata Arquivo, Novo, Cartafol, Gardar week1.php, e entón eu fun aquí.
E eu mudei un -
o que era aquilo, unha para o venres.
Mudei os ceros a un.
Eu mudei isto para unha.
>> OK, entón agora ollar os meus arquivos.
O que podería ser feito de forma diferente?
Onde está a oportunidade, quizais?
Polo tanto, hai a oportunidade de comezar factoring isto para fóra.
Déixeme abrir, como un spoiler, para o que vai ver en I set 7.
Se eu abrir-se, agora, na versión index.php cinco disto, parece moi
máis enigmático, en realidade.
>> Pero, agora, é o que eu chamo un controlador que está controlando a
lóxica da miña páxina.
E pode tipo de reconstruír, intuitivamente, se cadra, o que está a suceder.
Na primeira liña, está algo enigmática.
Mais repare que estou esixindo, como con include afiada, un arquivo chamado
helpers.php.
E entón eu estou chamando, ao parecer, un función, chamada renderse, pasando
dous argumentos.
>> Unha delas é cita unquote, cabeceira.
E o outro é, que tipo de tipo de datos é esta, baseada
no noso anterior sintaxe?
É unha matriz asociada.
En concreto, está pasando no título con algúns metadatos que lembra
me o que é eo seu valor.
Entón eu vexo un disco codificado ul, de ningún xeito HTML puro.
Pero, entón, eu estou de volta en modo PHP chamando a renderización función.
Así, mesmo se nunca usou HTML ou PHP antes, e aínda que iso parece
máis asustado, porque este é, probablemente, mellor deseño?
¿Que hai de mellor sobre o tema, baseada en inferencia?
>> Audiencia: [inaudível]
>> COLUMNA 1: Menos redundante en que non hai ningunha etiqueta HTML máis, non máis
cabezas etiqueta, non máis etiqueta body en todos os ficheiros de maldición.
Pola contra, eu teño consignado o semellanzas e, presuntamente, poñelos
nun arquivo de algunha maneira relacionados a unha cabeceira.
Ea mesma cousa para o corpo preto tag, tag HTML preto.
Isto é probablemente aquí dentro nalgún lugar do rodapé.
E vai ver, xuntos Problema 7, un pequeno paseo por iso.
>> Entón, o que está por vir?
O único que non ten a capacidade aínda para realmente almacenar datos.
E entón o que nós imos comezar a ver Mércores, por exemplo, é que a súa
vello amigo Excel, ou números, permite que almacenar moitas
datos en liñas e columnas.
Acontece que pode facelo no que se chamado unha base de datos, por medio de programación.
maníaco E ocorre que, despois diso, nós imos ser capaces de almacenar cousas como
tanto, o que vai ver de novo xuntos P 7, unha chea de nomes de usuarios e
contrasinais, o último dos cales está realmente cifrado, así como
estaban en edición pirata da P set 2.
E, finalmente, vai aplicar tanto, o seu propio sitio web eTrade-así
aplica colectivamente CS50 finanzas.
>> Por último, unha vez que quedou aquí tan tarde hoxe, se volver a esta parte
do campus, ás 4:00 horas de hoxe, imos darlle non só asesoramento, a SCES
Asesoría Fair, en 4:00 no Maxwell-Dworkin, nós imos dar-lle algunhas
Americone soño, Cereixa García, Chocolate Fudge Brownie, Chocolate
Chip Cookie Dough, e, cando Google Chunky Monkey, vostede pode iso.
Entón, todo isto espérase ás 4:00 PM de Maxwell-Dworkin.
Vexo vostede o mércores tamén.
>> COLUMNA 2: Na seguinte CS50, RJ durmir dentro
>> RJ: A miña sección!
Ha!
Oh,